Question

我正在网站上工作，我想知道在背景中不透明度的持续变化是如何发生的......

这是链接：我希望它像http://www.cecchi.net/〜

一样工作

盖伊的我使用了css动画..而关键帧很有用，但问题是我不知道如何随机分配不透明度到每个部门..这是代码：

<!DOCTYPE html>
<html>

<head>
  <style>
  .div1,
    div2 {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }
    /* Standard syntax */
    
    @keyframes example {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 0.8;
      }
      40% {
        opacity: 0.3;
      }
      60% {
        opacity: 0.6;
      }
      80% {
        opacity: 0.8;
      }
      100% {
        opacity: 1;
      }
      .div1 {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count: infinite;
      }
    }
    
    .div2 {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }
    
    box-sizing: border-box;
  }
  </style>
</head>

<body>

  <div class="div1"></div>
  <br>
  <div class="div2"></div>

</body>

</html>

Answer 1

我确定不确定，但您必须将ID分配给覆盖您图片的div网格，然后使用javascript / jQuery运行一个随机更改不透明度和过滤器的函数对于每个div。祝你好运。

Answer 2

它是barba.js点击以下链接：

https://github.com/luruke/barba.js/

您可以在上面的链接中找到很多过渡...

背景中的连续不透明度变化

2 个答案: