gpt4 book ai didi

css - 动画只影响 css-doodle 的第一个元素

转载 作者:行者123 更新时间:2023-11-28 14:01:48 26 4
gpt4 key购买 nike

我想在将鼠标悬停在涂鸦上时产生随机的“闪烁”效果。为此,当用户将鼠标悬停在涂鸦容器上时,我将动画名称 blink 存储到一个变量中。由于某种原因,动画仅适用于网格的第一个元素。有没有办法将动画应用于所有元素?

代码笔:https://codepen.io/entityinarray/pen/mdbRPRz

<html>
<script src="https://unpkg.com/css-doodle@0.7.2/css-doodle.min.js"></script>

<css-doodle>
:doodle {
@grid: 4/128px;
--h: ;
}

:doodle(:hover) {--h: blink;}

background: #200040;
animation-delay: rand(500ms);
animation: @var(--h) 1s infinite;

@keyframes blink {
0% {
background: #200040;
}
100% {
background: #8000c0;
}
}
</css-doodle>
</html>

最佳答案

问题是使用 @var(--h) 会生成类似 var(--h)-x 的代码,它是无效的,而且只是第一个item 具有良好的值(value) var(--h)

您可以简单地考虑如下所示的动画状态,而不是这样做。请注意,rand() 应与 @ 一起使用,并放在动画定义之后:

<html>
<script src="https://unpkg.com/css-doodle@0.7.2/css-doodle.min.js"></script>

<css-doodle>
:doodle {
@grid: 4/128px;
}

:doodle(:hover) {--h:running;}

background: #200040;
animation: blink 1s infinite;
animation-play-state:var(--h,paused);
animation-delay: @rand(500ms);

@keyframes blink {
0% {
background: #200040;
}
100% {
background: #8000c0;
}
}
</css-doodle>
</html>

关于css - 动画只影响 css-doodle 的第一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57614165/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com