在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);
}
}
这是一个带有旋转“尾巴”的装载机。我的问题是动画没有移动/运行。我正在使用Google Chrome。
Safari和Chrome使用的是属性-webkit-transform。
解决方案是在每个transform属性上添加一个-webkit-transform属性。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句