CSS
语言：
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;
}
@-webkit-keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #954ade;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@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;
}
@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;
}
@keyframes block-animation {
0% {
opacity: 0;
}
10% {
opacity: 1;
background: #e3b9e0;
}
20% {
