纯css实现一个地雷爆炸动画效果
代码语言：html
所属分类：动画
代码描述：纯css实现一个地雷爆炸动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@charset "UTF-8";
body {
overflow: hidden;
height: 100vh;
}
span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 200px;
line-height: 1;
white-space: nowrap;
animation: explosion 2s cubic-bezier(0.74, 0, 0.83, 0.94) infinite reverse both;
}
span:before {
content: '💣';
}
span:nth-child(1) {
clip-path: circle(8% at 0% 0%);
transform: translate(-50%, -50%) translate(-41.7193vmax, -41.7193vmax);
animation-name: explosion0;
}
@keyframes explosion0 {
39%, 68% {
transform: translate(-50%, -50%);
opacity: 1;
}
94%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(2) {
clip-path: circle(8% at 8% 0%);
transform: translate(-50%, -50%) translate(-39.69827vmax, -44.79614vmax);
animation-name: explosion1;
}
@keyframes explosion1 {
25%, 89% {
transform: translate(-50%, -50%);
opacity: 1;
}
98%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(3) {
clip-path: circle(8% at 16% 0%);
transform: translate(-50%, -50%) translate(-36.61801vmax, -48.01027vmax);
animation-name: explosion2;
}
@keyframes explosion2 {
29%, 50% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(4) {
clip-path: circle(8% at 24% 0%);
transform: translate(-50%, -50%) translate(-32.24903vmax, -51.22635vmax);
animation-name: explosion3;
}
@keyframes explosion3 {
44%, 70% {
transform: translate(-50%, -50%);
opacity: 1;
}
97%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(5) {
clip-path: circle(8% at 32% 0%);
transform: translate(-50%, -50%) translate(-26.39259vmax, -54.22956vmax);
animation-name: explosion4;
}
@keyframes explosion4 {
31%, 59% {
transform: translate(-50%, -50%);
opacity: 1;
}
97%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(6) {
clip-path: circle(8% at 40% 0%);
transform: translate(-50%, -50%) translate(-18.95576vmax, -56.72991vmax);
animation-name: explosion5;
}
@keyframes explosion5 {
50%, 81% {
transform: translate(-50%, -50%);
opacity: 1;
}
95%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(7) {
clip-path: circle(8% at 48% 0%);
transform: translate(-50%, -50%) translate(-10.04092vmax, -58.40702vmax);
animation-name: explosion6;
}
@keyframes explosion6 {
33%, 53% {
transform: translate(-50%, -50%);
opacity: 1;
}
97%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(8) {
clip-path: circle(8% at 56% 0%);
transform: translate(-50%, -50%) translate(0vmax, -59vmax);
animation-name: explosion7;
}
@keyframes explosion7 {
25%, 71% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(9) {
clip-path: circle(8% at 64% 0%);
transform: translate(-50%, -50%) translate(10.04092vmax, -58.40702vmax);
animation-name: explosion8;
}
@keyframes explosion8 {
30%, 80% {
transform: translate(-50%, -50%);
opacity: 1;
}
95%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(10) {
clip-path: circle(8% at 72% 0%);
transform: translate(-50%, -50%) translate(18.95576vmax, -56.72991vmax);
animation-name: explosion9;
}
@keyframes explosion9 {
23%, 88% {
transform: translate(-50%, -50%);
opacity: 1;
}
95%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(11) {
clip-path: circle(8% at 80% 0%);
transform: translate(-50%, -50%) translate(26.39259vmax, -54.22956vmax);
animation-name: explosion10;
}
@keyframes explosion10 {
39%, 66% {
transform: translate(-50%, -50%);
opacity: 1;
}
94%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(12) {
clip-path: circle(8% at 88% 0%);
transform: translate(-50%, -50%) translate(32.24903vmax, -51.22635vmax);
animation-name: explosion11;
}
@keyframes explosion11 {
20%, 72% {
transform: translate(-50%, -50%);
opacity: 1;
}
93%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(13) {
clip-path: circle(8% at 96% 0%);
transform: translate(-50%, -50%) translate(36.61801vmax, -48.01027vmax);
animation-name: explosion12;
}
@keyframes explosion12 {
40%, 73% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(14) {
clip-path: circle(8% at 104% 0%);
transform: translate(-50%, -50%) translate(39.69827vmax, -44.79614vmax);
animation-name: explosion13;
}
@keyframes explosion13 {
31%, 51% {
transform: translate(-50%, -50%);
opacity: 1;
}
94%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(15) {
clip-path: circle(8% at 112% 0%);
transform: translate(-50%, -50%) translate(41.7193vmax, -41.7193vmax);
animation-name: explosion14;
}
@keyframes explosion14 {
43%, 62% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(16) {
clip-path: circle(8% at 0% 8%);
transform: translate(-50%, -50%) translate(-44.79614vmax, -39.69827vmax);
animation-name: explosion15;
}
@keyframes explosion15 {
37%, 61% {
transform: translate(-50%, -50%);
opacity: 1;
}
96%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(17) {
clip-path: circle(8% at 8% 8%);
transform: translate(-50%, -50%) translate(-43.13351vmax, -43.13351vmax);
animation-name: explosion16;
}
@keyframes explosion16 {
42%, 62% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(18) {
clip-path: circle(8% at 16% 8%);
transform: translate(-50%, -50%) translate(-40.33162vmax, -46.8615vmax);
animation-name: explosion17;
}
@keyframes explosion17 {
39%, 64% {
transform: translate(-50%, -50%);
opacity: 1;
}
90%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(19) {
clip-path: circle(8% at 24% 8%);
transform: translate(-50%, -50%) translate(-36.05551vmax, -50.75507vmax);
animation-name: explosion18;
}
@keyframes explosion18 {
33%, 66% {
transform: translate(-50%, -50%);
opacity: 1;
}
90%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(20) {
clip-path: circle(8% at 32% 8%);
transform: translate(-50%, -50%) translate(-29.96331vmax, -54.56006vmax);
animation-name: explosion19;
}
@keyframes explosion19 {
32%, 58% {
transform: translate(-50%, -50%);
opacity: 1;
}
100%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(21) {
clip-path: circle(8% at 40% 8%);
transform: translate(-50%, -50%) translate(-21.81972vmax, -57.86968vmax);
animation-name: explosion20;
}
@keyframes explosion20 {
33%, 57% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(22) {
clip-path: circle(8% at 48% 8%);
transform: translate(-50%, -50%) translate(-11.67233vmax, -60.17003vmax);
animation-name: explosion21;
}
@keyframes explosion21 {
35%, 71% {
transform: translate(-50%, -50%);
opacity: 1;
}
95%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(23) {
clip-path: circle(8% at 56% 8%);
transform: translate(-50%, -50%) translate(0vmax, -61vmax);
animation-name: explosion22;
}
@keyframes explosion22 {
25%, 52% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(24) {
clip-path: circle(8% at 64% 8%);
transform: translate(-50%, -50%) translate(11.67233vmax, -60.17003vmax);
animation-name: explosion23;
}
@keyframes explosion23 {
25%, 63% {
transform: translate(-50%, -50%);
opacity: 1;
}
99%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(25) {
clip-path: circle(8% at 72% 8%);
transform: translate(-50%, -50%) translate(21.81972vmax, -57.86968vmax);
animation-name: explosion24;
}
@keyframes explosion24 {
48%, 51% {
transform: translate(-50%, -50%);
opacity: 1;
}
98%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(26) {
clip-path: circle(8% at 80% 8%);
transform: translate(-50%, -50%) translate(29.96331vmax, -54.56006vmax);
animation-name: explosion25;
}
@keyframes explosion25 {
29%, 64% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(27) {
clip-path: circle(8% at 88% 8%);
transform: translate(-50%, -50%) translate(36.05551vmax, -50.75507vmax);
animation-name: explosion26;
}
@keyframes explosion26 {
36%, 67% {
transform: translate(-50%, -50%);
opacity: 1;
}
90%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(28) {
clip-path: circle(8% at 96% 8%);
transform: translate(-50%, -50%) translate(40.33162vmax, -46.8615vmax);
animation-name: explosion27;
}
@keyframes explosion27 {
44%, 60% {
transform: translate(-50%, -50%);
opacity: 1;
}
90%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(29) {
clip-path: circle(8% at 104% 8%);
transform: translate(-50%, -50%) translate(43.13351vmax, -43.13351vmax);
animation-name: explosion28;
}
@keyframes explosion28 {
30%, 61% {
transform: translate(-50%, -50%);
opacity: 1;
}
99%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(30) {
clip-path: circle(8% at 112% 8%);
transform: translate(-50%, -50%) translate(44.79614vmax, -39.69827vmax);
animation-name: explosion29;
}
@keyframes explosion29 {
47%, 71% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(31) {
clip-path: circle(8% at 0% 16%);
transform: translate(-50%, -50%) translate(-48.01027vmax, -36.61801vmax);
animation-name: explosion30;
}
@keyframes explosion30 {
48%, 54% {
transform: translate(-50%, -50%);
opacity: 1;
}
97%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(32) {
clip-path: circle(8% at 8% 16%);
transform: translate(-50%, -50%) translate(-46.8615vmax, -40.33162vmax);
animation-name: explosion31;
}
@keyframes explosion31 {
22%, 84% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(33) {
clip-path: circle(8% at 16% 16%);
transform: translate(-50%, -50%) translate(-44.54773vmax, -44.54773vmax);
animation-name: explosion32;
}
@keyframes explosion32 {
31%, 78% {
transform: translate(-50%, -50%);
opacity: 1;
}
95%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(34) {
clip-path: circle(8% at 24% 16%);
transform: translate(-50%, -50%) translate(-40.60518vmax, -49.19473vmax);
animation-name: explosion33;
}
@keyframes explosion33 {
23%, 69% {
transform: translate(-50%, -50%);
opacity: 1;
}
90%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(35) {
clip-path: circle(8% at 32% 16%);
transform: translate(-50%, -50%) translate(-34.47122vmax, -54.02205vmax);
animation-name: explosion34;
}
@keyframes explosion34 {
20%, 82% {
transform: translate(-50%, -50%);
opacity: 1;
}
93%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(36) {
clip-path: circle(8% at 40% 16%);
transform: translate(-50%, -50%) translate(-25.62596vmax, -58.49403vmax);
animation-name: explosion35;
}
@keyframes explosion35 {
50%, 70% {
transform: translate(-50%, -50%);
opacity: 1;
}
96%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(37) {
clip-path: circle(8% at 48% 16%);
transform: translate(-50%, -50%) translate(-13.92425vmax, -61.77658vmax);
animation-name: explosion36;
}
@keyframes explosion36 {
29%, 57% {
transform: translate(-50%, -50%);
opacity: 1;
}
99%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(38) {
clip-path: circle(8% at 56% 16%);
transform: translate(-50%, -50%) translate(0vmax, -63vmax);
animation-name: explosion37;
}
@keyframes explosion37 {
34%, 54% {
transform: translate(-50%, -50%);
opacity: 1;
}
94%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(39) {
clip-path: circle(8% at 64% 16%);
transform: translate(-50%, -50%) translate(13.92425vmax, -61.77658vmax);
animation-name: explosion38;
}
@keyframes explosion38 {
47%, 87% {
transform: translate(-50%, -50%);
opacity: 1;
}
90%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(40) {
clip-path: circle(8% at 72% 16%);
transform: translate(-50%, -50%) translate(25.62596vmax, -58.49403vmax);
animation-name: explosion39;
}
@keyframes explosion39 {
42%, 67% {
transform: translate(-50%, -50%);
opacity: 1;
}
96%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(41) {
clip-path: circle(8% at 80% 16%);
transform: translate(-50%, -50%) translate(34.47122vmax, -54.02205vmax);
animation-name: explosion40;
}
@keyframes explosion40 {
50%, 69% {
transform: translate(-50%, -50%);
opacity: 1;
}
90%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(42) {
clip-path: circle(8% at 88% 16%);
transform: translate(-50%, -50%) translate(40.60518vmax, -49.19473vmax);
animation-name: explosion41;
}
@keyframes explosion41 {
29%, 65% {
transform: translate(-50%, -50%);
opacity: 1;
}
90%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(43) {
clip-path: circle(8% at 96% 16%);
transform: translate(-50%, -50%) translate(44.54773vmax, -44.54773vmax);
animation-name: explosion42;
}
@keyframes explosion42 {
40%, 53% {
transform: translate(-50%, -50%);
opacity: 1;
}
95%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(44) {
clip-path: circle(8% at 104% 16%);
transform: translate(-50%, -50%) translate(46.8615vmax, -40.33162vmax);
animation-name: explosion43;
}
@keyframes explosion43 {
47%, 82% {
transform: translate(-50%, -50%);
opacity: 1;
}
99%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(45) {
clip-path: circle(8% at 112% 16%);
transform: translate(-50%, -50%) translate(48.01027vmax, -36.61801vmax);
animation-name: explosion44;
}
@keyframes explosion44 {
25%, 55% {
transform: translate(-50%, -50%);
opacity: 1;
}
99%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(46) {
clip-path: circle(8% at 0% 24%);
transform: translate(-50%, -50%) translate(-51.22635vmax, -32.24903vmax);
animation-name: explosion45;
}
@keyframes explosion45 {
38%, 67% {
transform: translate(-50%, -50%);
opacity: 1;
}
96%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(47) {
clip-path: circle(8% at 8% 24%);
transform: translate(-50%, -50%) translate(-50.75507vmax, -36.05551vmax);
animation-name: explosion46;
}
@keyframes explosion46 {
42%, 72% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(48) {
clip-path: circle(8% at 16% 24%);
transform: translate(-50%, -50%) translate(-49.19473vmax, -40.60518vmax);
animation-name: explosion47;
}
@keyframes explosion47 {
34%, 56% {
transform: translate(-50%, -50%);
opacity: 1;
}
98%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(49) {
clip-path: circle(8% at 24% 24%);
transform: translate(-50%, -50%) translate(-45.96194vmax, -45.96194vmax);
animation-name: explosion48;
}
@keyframes explosion48 {
33%, 67% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(50) {
clip-path: circle(8% at 32% 24%);
transform: translate(-50%, -50%) translate(-40.2vmax, -52vmax);
animation-name: explosion49;
}
@keyframes explosion49 {
21%, 74% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(51) {
clip-path: circle(8% at 40% 24%);
transform: translate(-50%, -50%) translate(-30.85774vmax, -58.13777vmax);
animation-name: explosion50;
}
@keyframes explosion50 {
24%, 56% {
transform: translate(-50%, -50%);
opacity: 1;
}
98%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(52) {
clip-path: circle(8% at 48% 24%);
transform: translate(-50%, -50%) translate(-17.22003vmax, -63.05926vmax);
animation-name: explosion51;
}
@keyframes explosion51 {
38%, 71% {
transform: translate(-50%, -50%);
opacity: 1;
}
93%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(53) {
clip-path: circle(8% at 56% 24%);
transform: translate(-50%, -50%) translate(0vmax, -65vmax);
animation-name: explosion52;
}
@keyframes explosion52 {
33%, 72% {
transform: translate(-50%, -50%);
opacity: 1;
}
94%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(54) {
clip-path: circle(8% at 64% 24%);
transform: translate(-50%, -50%) translate(17.22003vmax, -63.05926vmax);
animation-name: explosion53;
}
@keyframes explosion53 {
20%, 77% {
transform: translate(-50%, -50%);
opacity: 1;
}
93%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(55) {
clip-path: circle(8% at 72% 24%);
transform: translate(-50%, -50%) translate(30.85774vmax, -58.13777vmax);
animation-name: explosion54;
}
@keyframes explosion54 {
26%, 63% {
transform: translate(-50%, -50%);
opacity: 1;
}
100%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(56) {
clip-path: circle(8% at 80% 24%);
transform: translate(-50%, -50%) translate(40.2vmax, -52vmax);
animation-name: explosion55;
}
@keyframes explosion55 {
25%, 82% {
transform: translate(-50%, -50%);
opacity: 1;
}
100%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(57) {
clip-path: circle(8% at 88% 24%);
transform: translate(-50%, -50%) translate(45.96194vmax, -45.96194vmax);
animation-name: explosion56;
}
@keyframes explosion56 {
39%, 87% {
transform: translate(-50%, -50%);
opacity: 1;
}
94%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(58) {
clip-path: circle(8% at 96% 24%);
transform: translate(-50%, -50%) translate(49.19473vmax, -40.60518vmax);
animation-name: explosion57;
}
@keyframes explosion57 {
46%, 63% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(59) {
clip-path: circle(8% at 104% 24%);
transform: translate(-50%, -50%) translate(50.75507vmax, -36.05551vmax);
animation-name: explosion58;
}
@keyframes explosion58 {
23%, 50% {
transform: translate(-50%, -50%);
opacity: 1;
}
97%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(60) {
clip-path: circle(8% at 112% 24%);
transform: translate(-50%, -50%) translate(51.22635vmax, -32.24903vmax);
animation-name: explosion59;
}
@keyframes explosion59 {
35%, 89% {
transform: translate(-50%, -50%);
opacity: 1;
}
90%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(61) {
clip-path: circle(8% at 0% 32%);
transform: translate(-50%, -50%) translate(-54.22956vmax, -26.39259vmax);
animation-name: explosion60;
}
@keyframes explosion60 {
28%, 77% {
transform: translate(-50%, -50%);
opacity: 1;
}
95%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(62) {
clip-path: circle(8% at 8% 32%);
transform: translate(-50%, -50%) translate(-54.56006vmax, -29.96331vmax);
animation-name: explosion61;
}
@keyframes explosion61 {
42%, 63% {
transform: translate(-50%, -50%);
opacity: 1;
}
99%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(63) {
clip-path: circle(8% at 16% 32%);
transform: translate(-50%, -50%) translate(-54.02205vmax, -34.47122vmax);
animation-name: explosion62;
}
@keyframes explosion62 {
42%, 70% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(64) {
clip-path: circle(8% at 24% 32%);
transform: translate(-50%, -50%) translate(-52vmax, -40.2vmax);
animation-name: explosion63;
}
@keyframes explosion63 {
44%, 80% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(65) {
clip-path: circle(8% at 32% 32%);
transform: translate(-50%, -50%) translate(-47.37615vmax, -47.37615vmax);
animation-name: explosion64;
}
@keyframes explosion64 {
47%, 79% {
transform: translate(-50%, -50%);
opacity: 1;
}
95%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(66) {
clip-path: circle(8% at 40% 32%);
transform: translate(-50%, -50%) translate(-38.27431vmax, -55.74737vmax);
animation-name: explosion65;
}
@keyframes explosion65 {
39%, 56% {
transform: translate(-50%, -50%);
opacity: 1;
}
97%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(67) {
clip-path: circle(8% at 48% 32%);
transform: translate(-50%, -50%) translate(-22.45217vmax, -63.56178vmax);
animation-name: explosion66;
}
@keyframes explosion66 {
25%, 71% {
transform: translate(-50%, -50%);
opacity: 1;
}
94%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(68) {
clip-path: circle(8% at 56% 32%);
transform: translate(-50%, -50%) translate(0vmax, -67vmax);
animation-name: explosion67;
}
@keyframes explosion67 {
39%, 51% {
transform: translate(-50%, -50%);
opacity: 1;
}
99%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(69) {
clip-path: circle(8% at 64% 32%);
transform: translate(-50%, -50%) translate(22.45217vmax, -63.56178vmax);
animation-name: explosion68;
}
@keyframes explosion68 {
34%, 85% {
transform: translate(-50%, -50%);
opacity: 1;
}
99%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(70) {
clip-path: circle(8% at 72% 32%);
transform: translate(-50%, -50%) translate(38.27431vmax, -55.74737vmax);
animation-name: explosion69;
}
@keyframes explosion69 {
24%, 60% {
transform: translate(-50%, -50%);
opacity: 1;
}
99%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(71) {
clip-path: circle(8% at 80% 32%);
transform: translate(-50%, -50%) translate(47.37615vmax, -47.37615vmax);
animation-name: explosion70;
}
@keyframes explosion70 {
21%, 80% {
transform: translate(-50%, -50%);
opacity: 1;
}
96%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(72) {
clip-path: circle(8% at 88% 32%);
transform: translate(-50%, -50%) translate(52vmax, -40.2vmax);
animation-name: explosion71;
}
@keyframes explosion71 {
46%, 64% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(73) {
clip-path: circle(8% at 96% 32%);
transform: translate(-50%, -50%) translate(54.02205vmax, -34.47122vmax);
animation-name: explosion72;
}
@keyframes explosion72 {
46%, 70% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(74) {
clip-path: circle(8% at 104% 32%);
transform: translate(-50%, -50%) translate(54.56006vmax, -29.96331vmax);
animation-name: explosion73;
}
@keyframes explosion73 {
48%, 79% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(75) {
clip-path: circle(8% at 112% 32%);
transform: translate(-50%, -50%) translate(54.22956vmax, -26.39259vmax);
animation-name: explosion74;
}
@keyframes explosion74 {
26%, 84% {
transform: translate(-50%, -50%);
opacity: 1;
}
100%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(76) {
clip-path: circle(8% at 0% 40%);
transform: translate(-50%, -50%) translate(-56.72991vmax, -18.95576vmax);
animation-name: explosion75;
}
@keyframes explosion75 {
47%, 75% {
transform: translate(-50%, -50%);
opacity: 1;
}
98%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(77) {
clip-path: circle(8% at 8% 40%);
transform: translate(-50%, -50%) translate(-57.86968vmax, -21.81972vmax);
animation-name: explosion76;
}
@keyframes explosion76 {
49%, 75% {
transform: translate(-50%, -50%);
opacity: 1;
}
100%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(78) {
clip-path: circle(8% at 16% 40%);
transform: translate(-50%, -50%) translate(-58.49403vmax, -25.62596vmax);
animation-name: explosion77;
}
@keyframes explosion77 {
43%, 61% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(79) {
clip-path: circle(8% at 24% 40%);
transform: translate(-50%, -50%) translate(-58.13777vmax, -30.85774vmax);
animation-name: explosion78;
}
@keyframes explosion78 {
50%, 53% {
transform: translate(-50%, -50%);
opacity: 1;
}
93%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(80) {
clip-path: circle(8% at 32% 40%);
transform: translate(-50%, -50%) translate(-55.74737vmax, -38.27431vmax);
animation-name: explosion79;
}
@keyframes explosion79 {
33%, 83% {
transform: translate(-50%, -50%);
opacity: 1;
}
95%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(81) {
clip-path: circle(8% at 40% 40%);
transform: translate(-50%, -50%) translate(-48.79037vmax, -48.79037vmax);
animation-name: explosion80;
}
@keyframes explosion80 {
48%, 68% {
transform: translate(-50%, -50%);
opacity: 1;
}
93%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(82) {
clip-path: circle(8% at 48% 40%);
transform: translate(-50%, -50%) translate(-31.75217vmax, -61.71548vmax);
animation-name: explosion81;
}
@keyframes explosion81 {
50%, 67% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(83) {
clip-path: circle(8% at 56% 40%);
transform: translate(-50%, -50%) translate(0vmax, -69vmax);
animation-name: explosion82;
}
@keyframes explosion82 {
30%, 56% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(84) {
clip-path: circle(8% at 64% 40%);
transform: translate(-50%, -50%) translate(31.75217vmax, -61.71548vmax);
animation-name: explosion83;
}
@keyframes explosion83 {
39%, 68% {
transform: translate(-50%, -50%);
opacity: 1;
}
97%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(85) {
clip-path: circle(8% at 72% 40%);
transform: translate(-50%, -50%) translate(48.79037vmax, -48.79037vmax);
animation-name: explosion84;
}
@keyframes explosion84 {
39%, 66% {
transform: translate(-50%, -50%);
opacity: 1;
}
96%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(86) {
clip-path: circle(8% at 80% 40%);
transform: translate(-50%, -50%) translate(55.74737vmax, -38.27431vmax);
animation-name: explosion85;
}
@keyframes explosion85 {
37%, 83% {
transform: translate(-50%, -50%);
opacity: 1;
}
93%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(87) {
clip-path: circle(8% at 88% 40%);
transform: translate(-50%, -50%) translate(58.13777vmax, -30.85774vmax);
animation-name: explosion86;
}
@keyframes explosion86 {
31%, 80% {
transform: translate(-50%, -50%);
opacity: 1;
}
99%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(88) {
clip-path: circle(8% at 96% 40%);
transform: translate(-50%, -50%) translate(58.49403vmax, -25.62596vmax);
animation-name: explosion87;
}
@keyframes explosion87 {
33%, 63% {
transform: translate(-50%, -50%);
opacity: 1;
}
98%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(89) {
clip-path: circle(8% at 104% 40%);
transform: translate(-50%, -50%) translate(57.86968vmax, -21.81972vmax);
animation-name: explosion88;
}
@keyframes explosion88 {
35%, 84% {
transform: translate(-50%, -50%);
opacity: 1;
}
99%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(90) {
clip-path: circle(8% at 112% 40%);
transform: translate(-50%, -50%) translate(56.72991vmax, -18.95576vmax);
animation-name: explosion89;
}
@keyframes explosion89 {
45%, 50% {
transform: translate(-50%, -50%);
opacity: 1;
}
97%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(91) {
clip-path: circle(8% at 0% 48%);
transform: translate(-50%, -50%) translate(-58.40702vmax, -10.04092vmax);
animation-name: explosion90;
}
@keyframes explosion90 {
22%, 63% {
transform: translate(-50%, -50%);
opacity: 1;
}
93%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(92) {
clip-path: circle(8% at 8% 48%);
transform: translate(-50%, -50%) translate(-60.17003vmax, -11.67233vmax);
animation-name: explosion91;
}
@keyframes explosion91 {
32%, 64% {
transform: translate(-50%, -50%);
opacity: 1;
}
94%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(93) {
clip-path: circle(8% at 16% 48%);
transform: translate(-50%, -50%) translate(-61.77658vmax, -13.92425vmax);
animation-name: explosion92;
}
@keyframes explosion92 {
22%, 56% {
transform: translate(-50%, -50%);
opacity: 1;
}
95%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(94) {
clip-path: circle(8% at 24% 48%);
transform: translate(-50%, -50%) translate(-63.05926vmax, -17.22003vmax);
animation-name: explosion93;
}
@keyframes explosion93 {
36%, 58% {
transform: translate(-50%, -50%);
opacity: 1;
}
98%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(95) {
clip-path: circle(8% at 32% 48%);
transform: translate(-50%, -50%) translate(-63.56178vmax, -22.45217vmax);
animation-name: explosion94;
}
@keyframes explosion94 {
46%, 51% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(96) {
clip-path: circle(8% at 40% 48%);
transform: translate(-50%, -50%) translate(-61.71548vmax, -31.75217vmax);
animation-name: explosion95;
}
@keyframes explosion95 {
35%, 63% {
transform: translate(-50%, -50%);
opacity: 1;
}
94%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(97) {
clip-path: circle(8% at 48% 48%);
transform: translate(-50%, -50%) translate(-50.20458vmax, -50.20458vmax);
animation-name: explosion96;
}
@keyframes explosion96 {
30%, 82% {
transform: translate(-50%, -50%);
opacity: 1;
}
100%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(98) {
clip-path: circle(8% at 56% 48%);
transform: translate(-50%, -50%) translate(0vmax, -71vmax);
animation-name: explosion97;
}
@keyframes explosion97 {
25%, 64% {
transform: translate(-50%, -50%);
opacity: 1;
}
94%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(99) {
clip-path: circle(8% at 64% 48%);
transform: translate(-50%, -50%) translate(50.20458vmax, -50.20458vmax);
animation-name: explosion98;
}
@keyframes explosion98 {
27%, 87% {
transform: translate(-50%, -50%);
opacity: 1;
}
94%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(100) {
clip-path: circle(8% at 72% 48%);
transform: translate(-50%, -50%) translate(61.71548vmax, -31.75217vmax);
animation-name: explosion99;
}
@keyframes explosion99 {
44%, 78% {
transform: translate(-50%, -50%);
opacity: 1;
}
94%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(101) {
clip-path: circle(8% at 80% 48%);
transform: translate(-50%, -50%) translate(63.56178vmax, -22.45217vmax);
animation-name: explosion100;
}
@keyframes explosion100 {
24%, 71% {
transform: translate(-50%, -50%);
opacity: 1;
}
93%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(102) {
clip-path: circle(8% at 88% 48%);
transform: translate(-50%, -50%) translate(63.05926vmax, -17.22003vmax);
animation-name: explosion101;
}
@keyframes explosion101 {
48%, 86% {
transform: translate(-50%, -50%);
opacity: 1;
}
96%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(103) {
clip-path: circle(8% at 96% 48%);
transform: translate(-50%, -50%) translate(61.77658vmax, -13.92425vmax);
animation-name: explosion102;
}
@keyframes explosion102 {
47%, 56% {
transform: translate(-50%, -50%);
opacity: 1;
}
98%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(104) {
clip-path: circle(8% at 104% 48%);
transform: translate(-50%, -50%) translate(60.17003vmax, -11.67233vmax);
animation-name: explosion103;
}
@keyframes explosion103 {
21%, 87% {
transform: translate(-50%, -50%);
opacity: 1;
}
97%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(105) {
clip-path: circle(8% at 112% 48%);
transform: translate(-50%, -50%) translate(58.40702vmax, -10.04092vmax);
animation-name: explosion104;
}
@keyframes explosion104 {
36%, 53% {
transform: translate(-50%, -50%);
opacity: 1;
}
96%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(106) {
clip-path: circle(8% at 0% 56%);
transform: translate(-50%, -50%) translate(-59vmax, 0vmax);
animation-name: explosion105;
}
@keyframes explosion105 {
48%, 73% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(107) {
clip-path: circle(8% at 8% 56%);
transform: translate(-50%, -50%) translate(-61vmax, 0vmax);
animation-name: explosion106;
}
@keyframes explosion106 {
20%, 60% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(108) {
clip-path: circle(8% at 16% 56%);
transform: translate(-50%, -50%) translate(-63vmax, 0vmax);
animation-name: explosion107;
}
@keyframes explosion107 {
36%, 82% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(109) {
clip-path: circle(8% at 24% 56%);
transform: translate(-50%, -50%) translate(-65vmax, 0vmax);
animation-name: explosion108;
}
@keyframes explosion108 {
33%, 75% {
transform: translate(-50%, -50%);
opacity: 1;
}
98%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(110) {
clip-path: circle(8% at 32% 56%);
transform: translate(-50%, -50%) translate(-67vmax, 0vmax);
animation-name: explosion109;
}
@keyframes explosion109 {
24%, 56% {
transform: translate(-50%, -50%);
opacity: 1;
}
96%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(111) {
clip-path: circle(8% at 40% 56%);
transform: translate(-50%, -50%) translate(-69vmax, 0vmax);
animation-name: explosion110;
}
@keyframes explosion110 {
50%, 86% {
transform: translate(-50%, -50%);
opacity: 1;
}
98%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(112) {
clip-path: circle(8% at 48% 56%);
transform: translate(-50%, -50%) translate(-71vmax, 0vmax);
animation-name: explosion111;
}
@keyframes explosion111 {
31%, 51% {
transform: translate(-50%, -50%);
opacity: 1;
}
93%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(113) {
clip-path: circle(8% at 56% 56%);
transform: translate(-50%, -50%) translate(0vmax, 73vmax);
animation-name: explosion112;
}
@keyframes explosion112 {
30%, 62% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(114) {
clip-path: circle(8% at 64% 56%);
transform: translate(-50%, -50%) translate(71vmax, 0vmax);
animation-name: explosion113;
}
@keyframes explosion113 {
22%, 80% {
transform: translate(-50%, -50%);
opacity: 1;
}
92%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(115) {
clip-path: circle(8% at 72% 56%);
transform: translate(-50%, -50%) translate(69vmax, 0vmax);
animation-name: explosion114;
}
@keyframes explosion114 {
21%, 65% {
transform: translate(-50%, -50%);
opacity: 1;
}
93%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(116) {
clip-path: circle(8% at 80% 56%);
transform: translate(-50%, -50%) translate(67vmax, 0vmax);
animation-name: explosion115;
}
@keyframes explosion115 {
33%, 88% {
transform: translate(-50%, -50%);
opacity: 1;
}
100%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(117) {
clip-path: circle(8% at 88% 56%);
transform: translate(-50%, -50%) translate(65vmax, 0vmax);
animation-name: explosion116;
}
@keyframes explosion116 {
36%, 78% {
transform: translate(-50%, -50%);
opacity: 1;
}
95%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(118) {
clip-path: circle(8% at 96% 56%);
transform: translate(-50%, -50%) translate(63vmax, 0vmax);
animation-name: explosion117;
}
@keyframes explosion117 {
35%, 76% {
transform: translate(-50%, -50%);
opacity: 1;
}
91%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(119) {
clip-path: circle(8% at 104% 56%);
transform: translate(-50%, -50%) translate(61vmax, 0vmax);
animation-name: explosion118;
}
@keyframes explosion118 {
24%, 90% {
transform: translate(-50%, -50%);
opacity: 1;
}
98%, 100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
span:nth-child(120) {
clip-path: circle(8% at 112% 56%);
transform: translate(-50%, -50%) translate(59vmax, 0vmax);
animation-name: explosion119;
}
@keyframes explosi.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0