CSS
语言&＃xff1a;
CSSSCSS
确定
html,
body {
background: -webkit-linear-gradient(top, #fff, #dcf);
background: linear-gradient(to bottom, #fff, #dcf);
height: 100%;
}
.container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.box {
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
margin: .1em;
height: 2em;
width: 2em;
display: inline-block;
position: relative;
padding: 0;
}
.box:after {
content: "";
background: #f00;
height: 100%;
width: 100%;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.box:nth-of-type(1):after {
-webkit-animation: 3s 0s block-animation linear infinite;
animation: 3s 0s block-animation linear infinite;
}
&＃64;-webkit-keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #954ade;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #954ade;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(2):after {
-webkit-animation: 3s 0.1s block-animation linear infinite;
animation: 3s 0.1s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #3175b0;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(3):after {
-webkit-animation: 3s 0.2s block-animation linear infinite;
animation: 3s 0.2s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #e3b9e0;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(4):after {
-webkit-animation: 3s 0.3s block-animation linear infinite;
animation: 3s 0.3s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #be1290;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(5):after {
-webkit-animation: 3s 0.4s block-animation linear infinite;
animation: 3s 0.4s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #cb4dce;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(10):after {
-webkit-animation: 3s 0.5s block-animation linear infinite;
animation: 3s 0.5s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #ee44c9;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(15):after {
-webkit-animation: 3s 0.6s block-animation linear infinite;
animation: 3s 0.6s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #a1a89e;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(20):after {
-webkit-animation: 3s 0.7s block-animation linear infinite;
animation: 3s 0.7s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #869ca3;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(25):after {
-webkit-animation: 3s 0.8s block-animation linear infinite;
animation: 3s 0.8s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #74af40;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(24):after {
-webkit-animation: 3s 0.9s block-animation linear infinite;
animation: 3s 0.9s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #6cb3e4;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(23):after {
-webkit-animation: 3s 1s block-animation linear infinite;
animation: 3s 1s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #47b6e3;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(22):after {
-webkit-animation: 3s 1.1s block-animation linear infinite;
animation: 3s 1.1s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #26dba9;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(21):after {
-webkit-animation: 3s 1.2s block-animation linear infinite;
animation: 3s 1.2s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #9bd27;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(16):after {
-webkit-animation: 3s 1.3s block-animation linear infinite;
animation: 3s 1.3s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #246be5;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(11):after {
-webkit-animation: 3s 1.4s block-animation linear infinite;
animation: 3s 1.4s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #38a7c3;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(6):after {
-webkit-animation: 3s 1.5s block-animation linear infinite;
animation: 3s 1.5s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #13482f;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(7):after {
-webkit-animation: 3s 1.6s block-animation linear infinite;
animation: 3s 1.6s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #730d6b;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(8):after {
-webkit-animation: 3s 1.7s block-animation linear infinite;
animation: 3s 1.7s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #1a605a;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(9):after {
-webkit-animation: 3s 1.8s block-animation linear infinite;
animation: 3s 1.8s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #42e64a;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(14):after {
-webkit-animation: 3s 1.9s block-animation linear infinite;
animation: 3s 1.9s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #ce1f8a;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(19):after {
-webkit-animation: 3s 2s block-animation linear infinite;
animation: 3s 2s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #ecbc9d;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(18):after {
-webkit-animation: 3s 2.1s block-animation linear infinite;
animation: 3s 2.1s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #b1e9c8;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(17):after {
-webkit-animation: 3s 2.2s block-animation linear infinite;
animation: 3s 2.2s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #138169;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(12):after {
-webkit-animation: 3s 2.3s block-animation linear infinite;
animation: 3s 2.3s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #397f8d;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.box:nth-of-type(13):after {
-webkit-animation: 3s 2.4s block-animation linear infinite;
animation: 3s 2.4s block-animation linear infinite;
}
&＃64;keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #7ad1f4;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
京公网安备 11010802041100号