html 点击页面实现下雪效果

最新推荐文章于 2024-06-12 19:23:43 发布

linzili225

最新推荐文章于 2024-06-12 19:23:43 发布

阅读量1.2k

点赞数

文章标签： html 前端 css3

本文链接：https://blog.csdn.net/weixin_57928463/article/details/121536069

版权

这篇博客通过HTML、CSS3和JavaScript实现了点击页面后下雪的视觉效果。利用CSS设置背景为黑色，创建了雪花动画，并在JavaScript中定义了雪花的生成、飘落及循环机制，当用户点击页面时，会增加200个雪花效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
       <style>
           body,html{
               margin: 0;
               padding: 0;
               overflow: hidden;
               background: black;
               height: 100%;
           }
           .snowAnimation{
               animation: snow 5s infinite linear;
                -webkit-animation: snow 5s infinite linear;
           }
       </style>
   </head>
   <body onclick = "addSnow()">
       <script>
           var windowWidth = window.screen.width;
           var windowHeight = window.screen.height;
           function createSnow(){
               var left = 0;
               var top = 0;
               var left_random = Math.random() * windowWidth;