在 Chrome 中运行此动画时遇到一些问题:
.login-loading {
position: absolute;
left: 50%;
top: 50%;
margin: -60px 0 0 -60px;
background: #fff;
width: 100px;
height: 100px;
border-radius: 100%;
border: 10px solid #19bee1;
}
.login-loading:after {
content: '';
background: trasparent;
width: 140%;
height: 140%;
position: absolute;
border-radius: 100%;
top: -20%;
left: -20%;
opacity: 0.7;
box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
-webkit-animation:rotates 2s infinite linear;
-moz-animation:rotates 2s infinite linear;
-o-animation:rotates 2s infinite linear;
animation: rotates 2s infinite linear;
}
@keyframes rotates {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes rotates {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-moz-keyframes rotates {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-o-keyframes rotates {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
这是一个有旋转“尾巴”的装载机。我的问题是动画没有移动/运行。我正在使用谷歌浏览器。