当前位置: article > 正文

HTML+JS 前端雪花飘落_前端雪花飘落代码

作者：Cpp五条 | 2024-04-10 02:51:14

踩

前端雪花飘落代码

1、概述：

以任意图片作为背景，在背景上添加雪花下落的特效效果，此处使用随机大小的彩色雪花实现。

2、实现功能：

（1）雪花随机出现并随机消失；

（2）雪花出现时大小随机；

（3）雪花颜色逐渐变淡并消失；

（4）雪花消失后删除其对象，减轻系统负担。

3、完整实现代码：

HTML:


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: black;
        }
    </style>
</head>
 
<body>
    <script src="雪花.js"></script>
</body>
 
</html>

JS:


function flake() {
    //先写静态再写动态
    //一朵雪花在屏幕内随即摆放
    var f = document.createElement("img");
    f.src = "flake.png";
    //随机问题用随机函数
    //先获取屏幕的宽高，在用随机函数得到一个随机的X Y值
    var width = document.documentElement.clientWidth;
    var heigh = document.documentElement.clientHeight;
    //获取屏幕随机坐标
    var left = Math.random() * width;
    var top = Math.random() * heigh;
    //  alert(width)
    f.style.position = "absolute";
    f.style.left = left + "px";
    f.style.top = top + "px";
    //随即缩放
    f.style.transform = "scale(" + Math.random() / 2 + ")"
    //将这个标签插入到body中
    document.body.appendChild(f);
    //在JS中可以使用方法里面的方法
    function down() {
        top++;
        left++;
        f.style.left = left + "px";
        f.style.top = top + "px";
        if (top > heigh) {
            top = -100;
        }
        if (left > width) {
            left = -100;
        }
    }
    setInterval(down, 20)
}
//下落
function down() {
    f.style.top++
}
setInterval(down, 1000)
for (var i = 0; i < 50; i++) {
    flake()
}

4、实现效果

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】