Here’s看起来如何
.spinner { position: absolute; top: 35%; left: 50%; height: 80px; width: 80px; margin: -40px 0 0 -40px; clip: rect(0,80px,40px); -webkit-animation: loading 1.5s linear infinite; animation: loading 1.5s linear infinite; transform-origin: center; &:after { content:''; position: absolute; height: 80px; width: 80px; clip: rect(0,40px); border-radius: 50%; -webkit-animation: loading2 1.5s ease-in-out infinite; animation: loading2 1.5s ease-in-out infinite; } } @-webkit-keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(220deg); transform: rotate(220deg); } } @keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(220deg); } } @-webkit-keyframes loading2 { 0% { Box-shadow: inset #5FA3F3 0 0 0 8px; -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 50% { Box-shadow: inset #2771C9 0 0 0 2px; } 100% { Box-shadow: inset #5FA3F3 0 0 0 8px; -webkit-transform: rotate(140deg); transform: rotate(140deg); } } @keyframes loading2 { 0% { Box-shadow: inset #5FA3F3 0 0 0 8px; -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 50% { Box-shadow: inset #2771C9 0 0 0 2px; } 100% { Box-shadow: inset #5FA3F3 0 0 0 8px; -webkit-transform: rotate(140deg); transform: rotate(140deg); } }
在Firefox(版本42.0)上,微调器有时会断断续续,我相信这可能是因为剪切的矩形在过渡结束时是动画和旋转的.我不确定如何解决这个问题,或者是否有更好的方法来实现这个微调器.
有任何想法吗?
解决方法
试试这个!将其应用于您看到闪烁的元素.
-webkit-transform-style: preserve-3d;
关于保存-3d的一点点:
https://css-tricks.com/almanac/properties/t/transform-style/
更新
您提供的示例链接非常容易.
如果你像你给的代码一样使用线性无限,我没有看到任何问题.
-webkit-animation: loading 1.5s linear infinite;
我尝试从线性到轻松修改这个,http://codepen.io/pksunkara/pen/gbejPv,它也导致了闪烁的结局.最好的方法是修复单色.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。