javascript - 使用随机数生成器更改 CSS 中的属性值

Question

我试图在下面的 CSS 代码中随机更改 animation-duration 属性(从 0 到 1)。

@keyframes blink {
   50% { border-color: #ff0000; }
}
p{
    animation-name: blink ;
    animation-duration: 0.1s ;
    animation-timing-function: step-end ;
    animation-iteration-count: infinite ;
    animation-direction: alternate ;
}

HTML

<div id="label_div">
    <p id="label" class = "blink">Player #</p >
</div>

到目前为止还没有使用过 Javascript，我愿意使用它。关于如何做到这一点的任何想法？我看了一下 this question但我不知道如何解决我的问题。

Answer 1

你的动画不适合我，但我认为这应该可以

const label = document.querySelector("p");
label.style.animationDuration = Math.random() + "s";

Math.random() 将返回 0-1 之间的数字。 http://www.w3schools.com/jsref/jsref_random.asp

顺便说一下，要修复你的动画，只需将 border: solid #000; 添加到你的 p css