1

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

CodePen：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>

4

1 回答 1

2

问题是使用@var(--h)生成的代码var(--h)-x无效，只有第一项具有良好的价值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>

于 2019-08-22T19:03:10.413 回答