冬至福利：动态下雪参考JS代码

✨ 聊天吹水分享
1

icon图标在末尾


const snowContainer = document.createElement('div');
snowContainer.id = 'dz-snow-container';

document.body.appendChild(snowContainer);

const style = document.createElement('style');

style.textContent = `
body {
    height: 100vh;
    overflow: hidden;
}

#dz-snow-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.dz-snowflake {
    position: absolute;
    top: -10px;
    width: 10px;
    height: 10px;
    background: url('https://chat.mice.pub/api/file/875bba89-c622-41c6-9ab8-0062ffa8feae') no-repeat center center; 
    background-size: cover;
    border-radius: 50%;
    animation-name: dz-snowfall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes dz-snowfall {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}`;

document.head.appendChild(style);

function createSnowflake() {
    const snowflake = document.createElement('div');
    snowflake.className = 'dz-snowflake';
    snowflake.style.left = Math.random() * 100 + 'vw';
    snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
    snowflake.style.animationDelay = Math.random() + 's';
    snowflake.style.width = snowflake.style.height = Math.random() * 10 + 10 + 'px'; 
    document.getElementById('dz-snow-container').appendChild(snowflake);
    setTimeout(() => {
        snowflake.remove();
    }, 5000);
}

function startSnowfall() {
    setInterval(createSnowflake, 100);
}

// 当文档加载完成后开始下雪
document.addEventListener('DOMContentLoaded', startSnowfall);

image

SZ8S{SKTUF}KSUZ}6}N2`K
SZ8S{SKTUF}KSUZ}6}N2`K1899×1215 197 KB

雪花

会不会引起其他样式冲突自行检查，如果有欢迎反馈

1 个赞
2

上传底部的icon，替换成自己的地址

3

【feat】用字符替换图标，即插即用。同样放入网站全局脚本即可

【fix】页面中部分按钮无法点击的情况

function snow() {

    var flake = document.createElement('div');
    
    flake.innerHTML = '❅';                                 //可选雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
    flake.style.cssText = 'position:absolute;color:#fff;';

    var documentHieght = window.innerHeight;                //获取页面的高度 相当于雪花下落结束时Y轴的位置  
    var documentWidth = window.innerWidth;                  //获取页面的宽度，利用这个数来算出，雪花开始时left的值
    
    var millisec = 10;                                      //定义生成一片雪花的毫秒数
    
    //设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
    
    setInterval(function () {                               //页面加载之后，定时器就开始工作
        var startLeft = Math.random() * documentWidth;      //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
        var endLeft = Math.random() * documentWidth;        //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
        var flakeSize = 3 + 20 * Math.random();             //随机生成雪花大小
        var durationTime = 4000 + 7000 * Math.random();     //随机生成雪花下落持续时间
        var startOpacity = 0.7 + 0.3 * Math.random();       //随机生成雪花下落 开始 时的透明度
        var endOpacity = 0.2 + 0.2 * Math.random();         //随机生成雪花下落 结束 时的透明度
        var cloneFlake = flake.cloneNode(true);             //克隆一个雪花模板

        //第一次修改样式，定义克隆出来的雪花的样式
        cloneFlake.style.cssText += `
                        left: ${startLeft}px;
                        opacity: ${startOpacity};
                        font-size:${flakeSize}px;
                        top:-25px;
                            transition:${durationTime}ms;`;

        
        document.body.appendChild(cloneFlake);//拼接到页面中

        //设置第二个定时器，一次性定时器，
        //当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
        setTimeout(function () {
            //第二次修改样式
            cloneFlake.style.cssText += `
                                left: ${endLeft}px;
                                top:${documentHieght}px;
                                opacity:${endOpacity};`;

            //设置第三个定时器，当雪花落下后，删除雪花。
            setTimeout(function () {
                cloneFlake.remove();
            }, durationTime);
        }, 0);

    }, millisec);
}
snow();
4
  1. 增加雪花颜色的随机性：目前的代码中雪花是白色的。可以通过增加随机选择颜色的逻辑，让雪花显示不同的颜色。
  2. 增加雪花旋转效果：为了使雪花下落时看起来更自然，可以添加一些旋转动画。
  3. 控制雪花密度：添加一个可以控制雪花密度的参数，让用户可以调整页面上雪花的数量。
  4. 响应式设*：确保雪花效果能在不同大小的屏幕上良好展示，包括手机和平板电脑。
  5. 性能优化：为了避免大量的雪花造成页面性能问题，可以设置雪花的最大数量限制。
  6. 加深雪花颜色：修改雪花的颜色数组，使用更深的颜色，以更好地模拟真实的冬天气氛。
  7. 改进雪花下落的动态效果：可以使雪花在下落过程中出现轻微的左右摇摆，模拟真实的雪花飘落效果。
function snow() {
    var flake = document.createElement('div');
    flake.innerHTML = '❅'; // 可选雪花字符
    flake.style.cssText = 'position:absolute;color:#fff;';

    var documentHeight = window.innerHeight;
    var documentWidth = window.innerWidth;

    var millisec = 10; // 生成雪花的间隔

    setInterval(function () {
        var startLeft = Math.random() * documentWidth;
        var endLeft = Math.random() * documentWidth;
        var flakeSize = 3 + 20 * Math.random();
        var durationTime = 4000 + 7000 * Math.random();
        var startOpacity = 0.7 + 0.3 * Math.random();
        var endOpacity = 0.2 + 0.2 * Math.random();
        var cloneFlake = flake.cloneNode(true);

        var colors = ['#fff', '#aee', '#aaf', '#ffa']; // 雪花颜色数组
        var randomColor = colors[Math.floor(Math.random() * colors.length)]; // 随机颜色

        cloneFlake.style.cssText += `
            left: ${startLeft}px;
            opacity: ${startOpacity};
            font-size:${flakeSize}px;
            color:${randomColor};
            top:-25px;
            transition: ${durationTime}ms;
            transform: rotate(${Math.random() * 360}deg);`; // 添加旋转

        document.body.appendChild(cloneFlake);

        setTimeout(function () {
            cloneFlake.style.cssText += `
                left: ${endLeft}px;
                top:${documentHeight}px;
                opacity:${endOpacity};
                transform: rotate(${Math.random() * 360}deg);`;

            setTimeout(function () {
                cloneFlake.remove();
            }, durationTime);
        }, 0);

    }, millisec);
}
snow();
5
  1. 增加雪花颜色的随机性：目前的代码中雪花是白色的。可以通过增加随机选择颜色的逻辑，让雪花显示不同的颜色。
  2. 增加雪花旋转效果：为了使雪花下落时看起来更自然，可以添加一些旋转动画。
  3. 控制雪花密度：添加一个可以控制雪花密度的参数，让用户可以调整页面上雪花的数量。
  4. 响应式设*：确保雪花效果能在不同大小的屏幕上良好展示，包括手机和平板电脑。
  5. 性能优化：为了避免大量的雪花造成页面性能问题，可以设置雪花的最大数量限制。
  6. 加深雪花颜色：修改雪花的颜色数组，使用更深的颜色，以更好地模拟真实的冬天气氛。
  7. 改进雪花下落的动态效果：可以使雪花在下落过程中出现轻微的左右摇摆，模拟真实的雪花飘落效果。
function snow() {
    var flake = document.createElement('div');
    flake.innerHTML = '❅'; // 可选雪花字符
    flake.style.cssText = 'position:absolute;';

    var documentHeight = window.innerHeight;
    var documentWidth = window.innerWidth;

    var millisec = 10; // 生成雪花的间隔

    setInterval(function () {
        var startLeft = Math.random() * documentWidth;
        var endLeft = Math.random() * documentWidth;
        var flakeSize = 3 + 20 * Math.random();
        var durationTime = 4000 + 7000 * Math.random();
        var startOpacity = 0.7 + 0.3 * Math.random();
        var endOpacity = 0.2 + 0.2 * Math.random();
        var cloneFlake = flake.cloneNode(true);

        var colors = ['#ccd', '#bbd', '#aac', '#99b']; // 加深的雪花颜色数组
        var randomColor = colors[Math.floor(Math.random() * colors.length)]; // 随机颜色

        cloneFlake.style.cssText += `
            left: ${startLeft}px;
            opacity: ${startOpacity};
            font-size:${flakeSize}px;
            color:${randomColor};
            top:-25px;
            transition: ${durationTime}ms;
            transform: rotate(${Math.random() * 360}deg);`; // 添加旋转

        document.body.appendChild(cloneFlake);

        setTimeout(function () {
            cloneFlake.style.cssText += `
                left: ${endLeft}px;
                top:${documentHeight}px;
                opacity:${endOpacity};
                transform: rotate(${Math.random() * 360}deg);`;

            setTimeout(function () {
                cloneFlake.remove();
            }, durationTime);
        }, 0);

    }, millisec);
}
snow();
1 个赞
6
  1. 加深雪花颜色：修改雪花的颜色数组，使用更深的颜色
  2. 改进雪花下落的动态效果：可以使雪花在下落过程中出现轻微的左右摇摆，模拟真实的雪花飘落效果。
  3. 增加雪花颜色的随机性：目前的代码中雪花是白色的。可以通过增加随机选择颜色的逻辑，让雪花显示不同的颜色。
  4. 增加雪花旋转效果：为了使雪花下落时看起来更自然，可以添加一些旋转动画。
  5. 控制雪花密度：添加一个可以控制雪花密度的参数，让用户可以调整页面上雪花的数量。
  6. 响应式设计：确保雪花效果能在不同大小的屏幕上良好展示，包括手机和平板电脑。
  7. 性能优化：为了避免大量的雪花造成页面性能问题，可以设置雪花的最大数量限制。

function snow() {
var flake = document.createElement(‘div’);
flake.innerHTML = ‘❅’; // 可选雪花字符
flake.style.cssText = ‘position:absolute;’;

var documentHeight = window.innerHeight;
var documentWidth = window.innerWidth;

var millisec = 10; // 生成雪花的间隔

setInterval(function () {
    var startLeft = Math.random() * documentWidth;
    var endLeft = Math.random() * documentWidth;
    var flakeSize = 3 + 20 * Math.random();
    var durationTime = 4000 + 7000 * Math.random();
    var startOpacity = 0.7 + 0.3 * Math.random();
    var endOpacity = 0.2 + 0.2 * Math.random();
    var cloneFlake = flake.cloneNode(true);

    var colors = ['#ccd', '#bbd', '#aac', '#99b']; // 加深的雪花颜色数组
    var randomColor = colors[Math.floor(Math.random() * colors.length)]; // 随机颜色

    cloneFlake.style.cssText += `
        left: ${startLeft}px;
        opacity: ${startOpacity};
        font-size:${flakeSize}px;
        color:${randomColor};
        top:-25px;
        transition: ${durationTime}ms;
        transform: rotate(${Math.random() * 360}deg);`; // 添加旋转

    document.body.appendChild(cloneFlake);

    setTimeout(function () {
        cloneFlake.style.cssText += `
            left: ${endLeft}px;
            top:${documentHeight}px;
            opacity:${endOpacity};
            transform: rotate(${Math.random() * 360}deg);`;

        setTimeout(function () {
            cloneFlake.remove();
        }, durationTime);
    }, 0);

}, millisec);

}
snow();

1 个赞
7

很棒！以后好望角社区会多出类似的活动，希望大家都能参与进来 :smiling_face_with_three_hearts: