html5动态散花效果代码

安简瑜 2023年05月14日 10:42 12 0

HTML5是一种用于构建现代网页的编程语言。在HTML5中，我们可以使用很多动态效果来增加网页的吸引力。其中一种非常流行的效果是动态散花效果。这种效果可以让网页看起来像是在飘落花瓣。

<!DOCTYPE html>
<html>
  <head>
    <title>动态散花效果</title>
    <style>
      .petals {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: pink;
        border-radius: 50%;
        animation: scatter 2s infinite;
      }
      
      @keyframes scatter {
        0% {
          opacity: 1;
          transform: translateY(0px);
        }
        100% {
          opacity: 0;
          transform: translateY(-200px) rotate(360deg);
        }
      }
    </style>
  </head>
  
  <body>
    <script>
      function scatterPetals() {
        let petalsContainer = document.createElement('div');
        petalsContainer.style.position = 'absolute';
        petalsContainer.style.width = '100%';
        petalsContainer.style.height = '100%';
        document.body.appendChild(petalsContainer);
        
        for(let i = 0; i < 100; i++){
          let petal = document.createElement('div');
          petal.className = 'petals';
          petal.style.left = Math.random() * window.innerWidth + 'px';
          petalsContainer.appendChild(petal);
        }
      }
      
      window.addEventListener('load', scatterPetals);
    </script>
  </body>
</html>

html5动态散花效果代码

在上面的代码中，我们定义了一个名为“petals”的class，它控制每个花瓣的样式。我们使用了CSS3的animation属性来实现花瓣飘落的效果。

接下来，我们使用JavaScript来创建第二个div，用于容纳所有的花瓣。我们循环100次，每次都创建一个新的花瓣并将其添加到容器中。通过Math.random() * window.innerWidth，我们可以确保每个花瓣的位置都是随机的。

最后，我们在window的load事件上调用了scatterPetals函数，以便在页面加载后创建花瓣。

以上就是实现动态散花效果的完整代码。尝试将其添加到您的网站中以创建美丽的动画效果吧！