小编Met*_*tta的帖子

我想用CSS3或JavaScript创建一个环形流程微调器,类似于Android中的加载进度微调器.

旋转器应连续旋转并填充沿边缘逐渐消失的纯色(即圆锥形渐变),如下图所示:

我怎样才能做到这一点？

我的css代码适用于chrome和safari,但不适用于Firefox,IE和Opera.当我创建@keyframes rotate {}时,对于其他浏览器,这不适用于这4行: animation-duration: 4s;
animation-timing-function: linear; animation-name:"rotate"; animation-iteration-count: infinite; 或者对于keyframe方法？我怎样才能解决这个问题？

CSS:

@-webkit-keyframes rotate {
0% {
    -webkit-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
    background-color:#2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
}  

  13% {
    -webkit-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
  }
  25% {
  -webkit-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
  }
  38% {
  -webkit-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
  }
  50% {
  -webkit-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
  }
  63% {
  -webkit-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
  } …