CSS100Day(16)-利用before、after伪元素完成长方形散花动画

设计简介#

本次主要利用两个关键点：

知识点1：一个是全局统一动画时长5s，然后使用0%、32%、74%等各自元素控制自己的出现和消失
知识点2：after和before可以实现长条形，父元素为一个长条背景颜色transparent，而after、before有颜色，这就像金箍棒的两端

效果展示#

实现代码和步骤#

HTML部分#

HTML部分如下

1
<div class="frame">
2
    <div class="blobb"></div>
3
    <div class="blobb-ring"></div>
4
    <svg class="octagon">
5
        <polygon points="30,0 70,0 100,30 100,70 70,100 30,100 0,70 0,30" />
6
    </svg>
7
    <svg class="triangle">
8
        <polygon points="53,0 106,90 0,90" />
9
    </svg>
10
    <div class="octa-sparkles">
11
        <div class="sparkle s1"></div>
12
        <div class="sparkle s2"></div>
13
        <div class="sparkle s3"></div>
14
        <div class="sparkle s4"></div>
15
    </div>
16
    <div class="triangle-sparkles">
17
        <div class="sparkle s1"></div>
18
        <div class="sparkle s2"></div>
19
        <div class="sparkle s3"></div>
20
    </div>
21
</div>

CSS部分#

注意2知识点即可

1
.frame {
2
    width: 400px;
3
    height: 400px;
4
    border-radius: 2px;
5
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
6
    background: #46a6da;
7
    position: relative;
8
    overflow: hidden;
9
}
10

11
.blobb {
12
    position: absolute;
13
    width: 90px;
14
    height: 90px;
15
    top: 155px;
16
    left: 155px;
17
    background: #fff;
18
    border-radius: 50%;
19
    animation: blobby 5s ease-in-out infinite;
20
}
21

22
.blobb-ring {
23
    position: absolute;
24
    box-sizing: border-box;
25
    width: 110px;
26
    height: 110px;
27
    top: 145px;
28
    left: 145px;
29
    border: 3px solid #fff;
30
    border-radius: 50%;
31
    animation: blobby-ring 5s ease-in-out infinite;
32
}
33

34
.octagon {
35
    position: absolute;
36
    width: 100px;
37
    height: 100px;
38
    top: 150px;
39
    left: 150px;
40
    fill: #fff;
41
    animation: octa 5s ease-in-out infinite;
42
}
43

44
.octa-sparkles {
45
    position: absolute;
46
    width: 200px;
47
    height: 200px;
48
    top: 100px;
49
    left: 100px;
50
    animation: octa-sparkle 5s ease-in-out infinite;
51

52
    .sparkle {
53
        position: absolute;
54
        top: 0;
55
        left: 98px;
56
        width: 4px;
57
        height: 200px;
58

59
        &:before,
60
        &:after {
61
            display: block;
62
            content: "";
63
            position: absolute;
64
            width: 4px;
65
            height: 25px;
66
            top: 0;
67
            left: 0;
68
            border-radius: 2px;
69
            background: #fff;
70
        }
71

72
        &:after {
73
            top: auto;
74
            bottom: 0;
75
        }
76
    }
77

78
    .s2 {
79
        transform: rotate(45deg);
80
    }
81
    .s3 {
82
        transform: rotate(90deg);
83
    }
84
    .s4 {
85
        transform: rotate(135deg);
86
    }
87
}
88

89
.triangle {
90
    position: absolute;
91
    width: 106px;
92
    height: 90px;
93
    top: 145px;
94
    left: 147px;
95
    fill: #fff;
96
    animation: triangle 5s ease-in-out infinite;
97
}
98

99
.triangle-sparkles {
100
    position: absolute;
101
    width: 200px;
102
    height: 200px;
103
    top: 100px;
104
    left: 100px;
105
    animation: triangle-sparkle 5s ease-in-out infinite;
106

107
    .sparkle {
108
        position: absolute;
109
        top: 0;
110
        left: 98px;
111
        width: 4px;
112
        height: 200px;
113

114
        &::before,
115
        &::after {
116
            position: absolute;
117
            display: block;
118
            content: "";
119
            width: 4px;
120
            height: 25px;
121
            border-radius: 2px;
122
            background-color: #fff;
123
            top: 0;
124
            left: 0;
125
        }
126
    }
127

128
    .s1 {
129
        top: 10px;
130
    }
131
    .s2 {
132
        rotate: 124deg;
133
    }
134
    .s3 {
135
        rotate: 237deg;
136
    }
137
}
138

139
/* 前面1s，后面1s，中间消失3秒 */
140
@keyframes blobby {
141
    0% {
142
        transform: translate3d(0, -300px, 0) scaleY(1.2);
143
    }
144
    10% {
145
        transform: translate3d(0, 50px, 0) scaleY(0.8);
146
    }
147
    14% {
148
        transform: translate3d(0, -30px, 0) scaleY(1.1);
149
    }
150
    18% {
151
        transform: translate3d(0, 10px, 0) scaleY(0.9);
152
    }
153
    20%,
154
    22% {
155
        transform: translate3d(0, 0, 0) scaleY(1);
156
    }
157
    26% {
158
        transform: translate3d(0, 0, 0) scale(1.2);
159
    }
160
    32%,
161
    74% {
162
        transform: translate3d(0, 0, 0) scale(0);
163
    }
164
    80% {
165
        transform: translate3d(0, 0, 0) scale(1.2);
166
    }
167
    84% {
168
        transform: translate3d(0, 0, 0) scale(0.9);
169
    }
170
    86%,
171
    88% {
172
        transform: translate3d(0, 0, 0) scale(1);
173
    }
174
    92% {
175
        transform: translate3d(0, -30px, 0) scaleY(0.9);
176
    }
177
    100% {
178
        transform: translate3d(0, 300px, 0) scaleY(1.2);
179
    }
180
}
181

182
@keyframes blobby-ring {
183
    0%,
184
    74% {
185
        transform: translate3d(0, 0, 0) scale(0);
186
        opacity: 1;
187
    }
188
    80% {
189
        opacity: 1;
190
    }
191
    84%,
192
    100% {
193
        transform: translate3d(0, 0, 0) scale(1.4);
194
        opacity: 0;
195
    }
196
}
197

198
@keyframes octa {
199
    0%,
200
    30% {
201
        transform: translate3d(0, 0, 0) scale(0) rotate(22.5deg);
202
    }
203
    36% {
204
        transform: translate3d(0, 0, 0) scale(1.2) rotate(22.5deg);
205
    }
206
    40% {
207
        transform: translate3d(0, 0, 0) scale(0.9) rotate(22.5deg);
208
    }
209
    42%,
210
    44% {
211
        transform: translate3d(0, 0, 0) scale(1) rotate(22.5deg);
212
    }
213
    48% {
214
        transform: translate3d(0, 0, 0) scale(1.2) rotate(22.5deg);
215
    }
216
    54%,
217
    100% {
218
        transform: translate3d(0, 0, 0) scale(0) rotate(22.5deg);
219
    }
220
}
221

222
@keyframes triangle {
223
    0%,
224
    52% {
225
        transform: translate3d(0, 0, 0) scale(0);
226
    }
227
    58% {
228
        transform: translate3d(0, 0, 0) scale(1.2);
229
    }
230
    62% {
231
        transform: translate3d(0, 0, 0) scale(0.9);
232
    }
233
    64%,
234
    66% {
235
        transform: translate3d(0, 0, 0) scale(1);
236
    }
237
    70% {
238
        transform: translate3d(0, 0, 0) scale(1.2);
239
    }
240
    76%,
241
    100% {
242
        transform: translate3d(0, 0, 0) scale(0);
243
    }
244
}
245

246
@keyframes octa-sparkle {
247
    0%,
248
    30% {
249
        transform: translate3d(0, 0, 0) scale(0);
250
        opacity: 1;
251
    }
252
    36% {
253
        opacity: 1;
254
    }
255
    40%,
256
    100% {
257
        transform: translate3d(0, 0, 0) scale(1.4);
258
        opacity: 0;
259
    }
260
}
261

262
@keyframes triangle-sparkle {
263
    0%,
264
    52% {
265
        transform: translate3d(0, 0, 0) scale(0);
266
        opacity: 1;
267
    }
268
    58% {
269
        opacity: 1;
270
    }
271
    62%,
272
    100% {
273
        transform: translate3d(0, 0, 0) scale(1.4);
274
        opacity: 0;
275
    }
276
}

设计简介#

效果展示#

实现代码和步骤#

HTML部分#

CSS部分#

评论区

目录