CSS3打造粒子模糊背景色块随机显示动画

2017年07月26日 23:00:37益点益滴3261

由CSS3打造的粒子模糊背景色块随机显示动画效果全部代码

2016103117234633.jpg

<!DOCTYPE html>    
<html >    
<head>    
<meta charset="UTF-8">    
<title>CSS3打造粒子模糊背景色块随机显示动画</title>    
<style>    
*, *::before, *::after {    
box-sizing: border-box;    
}    
html {    
background: radial-gradient(#222222, #000000);    
background-attachment: fixed;    
}    
body {    
margin: 0;    
overflow: hidden;    
text-align: center;    
}    
.container {    
width: 80%;    
position: absolute;    
top: 50%;    
left: 50%;    
transform: translate(-50%, -50%);    
}    
.light-1 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 3.15s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40bf63;    
}    
.light-2 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 3.825s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf9c40;    
}    
.light-3 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 1.71s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #7840bf;    
}    
.light-4 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 1.74s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf9c40;    
}    
.light-5 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 3.515s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #9640bf;    
}    
.light-6 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 1.675s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf4057;    
}    
.light-7 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 0.515s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #59bf40;    
}    
.light-8 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 4.855s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #407abf;    
}    
.light-9 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.435s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40bf54;    
}    
.light-10 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 1.735s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #8f40bf;    
}    
.light-11 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 3.695s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #87bf40;    
}    
.light-12 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.455s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #404dbf;    
}    
.light-13 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 4.955s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #6140bf;    
}    
.light-14 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 0.675s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #6140bf;    
}    
.light-15 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.955s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #4091bf;    
}    
.light-16 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 4.125s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40b8bf;    
}    
.light-17 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.765s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #4099bf;    
}    
.light-18 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 4.79s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #96bf40;    
}    
.light-19 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 3.195s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #61bf40;    
}    
.light-20 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.175s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #4082bf;    
}    
.light-21 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 4.9s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #8740bf;    
}    
.light-22 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 4.985s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf7d40;    
}    
.light-23 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 3.33s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf6640;    
}    
.light-24 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 0.205s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40bfb0;    
}    
.light-25 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 0.67s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40bfa8;    
}    
.light-26 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 3.27s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf4047;    
}    
.light-27 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 1.05s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40b8bf;    
}    
.light-28 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 3.09s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40a8bf;    
}    
.light-29 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 4.015s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf8540;    
}    
.light-30 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.955s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf7540;    
}    
.light-31 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.105s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40bf8a;    
}    
.light-32 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.995s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bd40bf;    
}    
.light-33 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 4.045s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf4066;    
}    
.light-34 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.915s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #6140bf;    
}    
.light-35 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 0.195s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40a8bf;    
}    
.light-36 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.75s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf409c;    
}    
.light-37 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 0.315s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #9e40bf;    
}    
.light-38 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.32s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #52bf40;    
}    
.light-39 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 1.945s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #4240bf;    
}    
.light-40 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 1.465s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #8fbf40;    
}    
.light-41 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 4.64s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf4040;    
}    
.light-42 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.69s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #a640bf;    
}    
.light-43 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 1.635s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40bf45;    
}    
.light-44 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 3s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40bf99;    
}    
.light-45 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 1.48s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf4740;    
}    
.light-46 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 0.185s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bfba40;    
}    
.light-47 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.545s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #59bf40;    
}    
.light-48 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.985s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bfb340;    
}    
.light-49 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 0.545s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #9ebf40;    
}    
.light-50 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 3.805s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40bf4d;    
}    
.light-51 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 3.305s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #40bf6b;    
}    
.light-52 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 4.18s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf405e;    
}    
.light-53 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 0.95s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #52bf40;    
}    
.light-54 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.465s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #8740bf;    
}    
.light-55 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 0.345s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #87bf40;    
}    
.light-56 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 4.6s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #8040bf;    
}    
.light-57 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 1.02s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #5940bf;    
}    
.light-58 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 4.845s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #bf40ab;    
}    
.light-59 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 1.205s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #5240bf;    
}    
.light-60 {    
position: relative;    
display: inline-block;    
width: 0;    
height: 0;    
margin: 30px;    
background-color: rgba(255, 255, 255, 0);    
opacity: 0;    
animation: light 4s linear infinite;    
animation-delay: 2.905s;    
border-radius: 50%;    
box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.5), 0 0 50px 40px #69bf40;    
}    
@keyframes light {    
0% {    
opacity: 0;    
}    
30% {    
opacity: 0.5;    
}    
70% {    
opacity: 0;    
}    
}    
</style>    
<script src="js/prefixfree.min.js"></script>    
</head>    
<body>    
<div class='container'>    
<span class='light light-1'></span>    
<span class='light light-2'></span>    
<span class='light light-3'></span>    
<span class='light light-4'></span>    
<span class='light light-5'></span>    
<span class='light light-6'></span>    
<span class='light light-7'></span>    
<span class='light light-8'></span>    
<span class='light light-9'></span>    
<span class='light light-10'></span>    
<span class='light light-11'></span>    
<span class='light light-12'></span>    
<span class='light light-13'></span>    
<span class='light light-14'></span>    
<span class='light light-15'></span>    
<span class='light light-16'></span>    
<span class='light light-17'></span>    
<span class='light light-18'></span>    
<span class='light light-19'></span>    
<span class='light light-20'></span>    
<span class='light light-21'></span>    
<span class='light light-22'></span>    
<span class='light light-23'></span>    
<span class='light light-24'></span>    
<span class='light light-25'></span>    
<span class='light light-26'></span>    
<span class='light light-27'></span>    
<span class='light light-28'></span>    
<span class='light light-29'></span>    
<span class='light light-30'></span>    
<span class='light light-31'></span>    
<span class='light light-32'></span>    
<span class='light light-33'></span>    
<span class='light light-34'></span>    
<span class='light light-35'></span>    
<span class='light light-36'></span>    
<span class='light light-37'></span>    
<span class='light light-38'></span>    
<span class='light light-39'></span>    
<span class='light light-40'></span>    
<span class='light light-41'></span>    
<span class='light light-42'></span>    
<span class='light light-43'></span>    
<span class='light light-44'></span>    
<span class='light light-45'></span>    
<span class='light light-46'></span>    
<span class='light light-47'></span>    
<span class='light light-48'></span>    
<span class='light light-49'></span>    
<span class='light light-50'></span>    
<span class='light light-51'></span>    
<span class='light light-52'></span>    
<span class='light light-53'></span>    
<span class='light light-54'></span>    
<span class='light light-55'></span>    
<span class='light light-56'></span>    
<span class='light light-57'></span>    
<span class='light light-58'></span>    
<span class='light light-59'></span>    
<span class='light light-60'></span>    
</div>    
</body>    
</html>

超赞,真给力!嗯,必须鼓励~

打赏0
账号:mxy310@163.com[复制]
账号:77940140[复制]