Question

我想要做的是根据javascript中的x等于更改@keyframes的0％和100％的最高值。
我以前用javascript更改过css但是我被困在这个上了。

谢谢，
丹尼尔

代码：

＆＃13;

var x = Math.floor((Math.random() * 1080) + 1);

＆＃13;

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}


@keyframes example {
    0%   {left:0px; top:300px}
    100% {left:830px; top:0px}
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <intercept-url pattern="/favicon.ico" access="ROLE_ANONYMOUS"/>


        <style> 

</style>
    </head>
    <body>
        <div></div>
    </body>
</html>

＆＃13;

Answer 1

考虑CSS变量，您可以轻松地执行此操作：

＆＃13;

var x = Math.floor((Math.random() * 300) + 1);
console.log(x);
var root = document.querySelector(':root');
root.style.setProperty("--top",x+"px");

＆＃13;

:root {
  --top: 0;
}

div.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s;
  /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0% {
    top: var(--top);
  }
  100% {
    top: 0;
  }
}

＆＃13;

<div class="box"></div>

＆＃13;

如何使用javascript

1 个答案: