如何改变 css 使用变量制作动画

Question

如何使用 JavaScript 转换 CSS 值？我制作了这段代码，但它不起作用：

var num = 100;
function fillDiv{
var a=document.getElementById("principal");
for (var i = 0; i<100; i++){
    num=num-25;
    a.style.background="-moz-radial-gradient(#FFFFFF "+num+"%, #006699 200%);";
    if (num==0){
       break;
    }
 }

在调试中 window 一切正常，但是当我在元素标签上检查它时，值没有改变。

Answer 1

如评论中所述，for 循环太快而无法注意到效果，您可以改用 interval，将间隔周期设置为 40 这就像 [=每秒 16=] 帧，还使步骤 10 而不是 num = num - 10; 中的 4 以便动画看起来流畅且引人注目，如下所示：

JS Fiddle

var num = 100;

var $interval = setInterval(function() {
  var a = document.getElementById("principal");
  num = num - 10;
  if (num >= 0) {
    a.style.background = '-moz-radial-gradient(#FFF ' + num + '%,#1e69de 200%)';
    a.style.background = '-webkit-radial-gradient(#FFF ' + num + '%,#1e69de 200%)';
    a.style.background = 'radial-gradient(#FFF ' + num + '%,#1e69de 200%)';
  } else {
    clearInterval($interval);
  }
}, 40);

body {
  margin: 0;
  padding: 0;
}
#principal {
  width: 100vw;
  height: 100vh;
  display: block;
  background-color: #1e69de;
  margin: 0 auto;
}

<div id="principal"></div>

如何改变 css 使用变量制作动画

How change css using variables to make an animation

html

css

gradient

setinterval

css-transitions