html – 由CSS剪辑引起的闪烁微调器？

概述Here’s看起来如何 .spinner { position: absolute; top: 35%; left: 50%; height: 80px; width: 80px; margin: -40px 0 0 -40px; clip: rect(0, 80px, 80px, 40px); 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,它也导致了闪烁的结局.最好的方法是修复单色.

总结

以上是内存溢出为你收集整理的html – 由CSS剪辑引起的闪烁微调器？全部内容，希望文章能够帮你解决html – 由CSS剪辑引起的闪烁微调器？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。