CSS100Day(18)-3D实现弹性元素

1
:root {
2
    --green: #37d493;
3
    --grey: #444;
4
    --speed: 5s;
5
    --e-width: 420px;
6
    --e-w-offset: -10px;
7
    --e-height: 400px;
8
}
9

10
.frame {
11
    width: 400px;
12
    height: 400px;
13
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
14
    border-radius: 2px;
15
    overflow: hidden;
16
    position: relative;
17
}
18

19
.top,
20
.bottom {
21
    position: absolute;
22
    width: 100%;
23
    height: 200px;
24
    top: 0;
25
    left: 0;
26
    background-color: var(--grey);
27
}
28

29
.bottom {
30
    top: 50%;
31
    background-color: var(--green);
32
}
33

34
.ellipse {
35
    position: absolute;
36
    z-index: 2;
37
    width: var(--e-width);
38
    height: var(--e-height);
39
    top: 0;
40
    left: var(--e-w-offset);
41
    transform-style: preserve-3d;
42
    animation: elastic var(--speed) ease-in-out infinite;
43

44
    .grey,
45
    .green {
46
        position: absolute;
47
        width: var(--e-width);
48
        height: var(--e-height);
49
        backface-visibility: hidden;
50
        border-radius: 50%;
51
    }
52

53
    .grey {
54
        background: var(--grey);
55
        transform: rotateX(0deg);
56
    }
57

58
    .green {
59
        background: var(--green);
60
        transform: rotateX(180deg);
61
    }
62
}
63

64
@keyframes elastic {
65
    0% {
66
        transform: rotateX(90deg);
67
    }
68
    15% {
69
        transform: rotateX(150deg);
70
    }
71
    20% {
72
        transform: rotateX(50deg);
73
    }
74
    25% {
75
        transform: rotateX(120deg);
76
    }
77
    30% {
78
        transform: rotateX(70deg);
79
    }
80
    35% {
81
        transform: rotateX(100deg);
82
    }
83
    40% {
84
        transform: rotateX(83deg);
85
    }
86
    45% {
87
        transform: rotateX(93deg);
88
    }
89
    50% {
90
        transform: rotateX(90deg);
91
    }
92

93
    65% {
94
        transform: rotateX(30deg);
95
    }
96
    70% {
97
        transform: rotateX(130deg);
98
    }
99
    75% {
100
        transform: rotateX(60deg);
101
    }
102
    80% {
103
        transform: rotateX(110deg);
104
    }
105
    85% {
106
        transform: rotateX(80deg);
107
    }
108
    90% {
109
        transform: rotateX(97deg);
110
    }
111
    95% {
112
        transform: rotateX(87deg);
113
    }
114
    100% {
115
        transform: rotateX(90deg);
116
    }
117
}