纯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%);
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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