CSS
语言：
CSSSCSS
确定
body {
background: #ecf0f1;
overflow: hidden;
}
body * {
position: absolute;
}
.container {
font-size: 1.5vw;
top: 50%;
left: 50%;
}
.char {
width: 5em;
height: 5em;
top: -2.5em;
background: radial-gradient(#2b87c3, #34495e);
}
.char .tile {
width: 1em;
height: 1em;
}
.char .tile:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
/* Border: fix the currentColor bug in chrome and cover the gaps due to pixel rouding */
height: 100%;
border: 1px solid;
margin: -1px 0 0 -1px;
background: currentColor;
}
@keyframes char1 {
0%,100% {
left: -8em;
}
}
.char:nth-child(1) {
animation: char1 18s steps(1) infinite;
}
@keyframes rottile1_1_1 {
from, to, 0%, 19.44444%, 27.77778%, 47.22222%, 55.55556%, 91.66667% {
transform: rotate3d(1, -1, 0, 0deg);
color: #ecf0f1;
}
4.16667%,
15.27778%,
59.72222%,
87.5% {
transform: rotate3d(1, -1, 0, 90deg);
color: #bdc3c7;
}
}
.char:nth-child(1) .tile:nth-child(1) {
top: 0;
left: 0;
transform: translate(0em, 0em);
}
.char:nth-child(1) .tile:nth-child(1):before {
animation: rottile1_1_1 18s infinite;
animation-play-state: running !important;
}
@keyframes rottile1_1_2 {
from, to, 0.46296%, 19.90741%, 27.95139%, 47.39583%, 55.77485%, 91.88596% {
transform: rotate3d(1, -1, 0, 0deg);
color: #ecf0f1;
}
4.62963%,
15.74074%,
32.11806%,
43.22917%,
59.94152%,
87.7193% {
transform: rotate3d(1, -1, 0, 90deg);
color: #bdc3c7;
}
}
.char:nth-child(1) .tile:nth-child(2) {
top: 0;
left: 0;
transform: translate(1em, 0em);
}
.char:nth-child(1) .tile:nth-child(2):before {
animation: rottile1_1_2 18s infinite;
animation-play-state: running !important;
}
@keyframes rottile1_1_3 {
from, to, 0.92593%, 20.37037%, 28.125%, 47.56944%, 55.99415%, 92.10526% {
transform: rotate3d(1, -1, 0, 0deg);
color: #ecf0f1;
}
5.09259%,
16.2037%,
32.29167%,
43.40278%,
60.16082%,
87.9386% {
transform: rotate3d(1, -1, 0, 90deg);
color: #bdc3c7;
}
}
.char:nth-child(1) .tile:nth-child(3) {
top: 0;
left: 0;
transform: translate(2em, 0em);
}
.char:nth-child(1) .tile:nth-child(3):before {
animation: rottile1_1_3 18s infinite;
animation-play-state: running !important;
}
@keyframes rottile1_1_4 {
from, to, 1.38889%, 20.83333%, 28.29861%, 47.74306%, 56.21345%, 92.32456% {
transform: rotate3
最低0.47元/天 解锁文章
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
