好看的雪花背景o

Posted 2021-05-16 MaNqo

我又来了！

效果展示

白色的背景配上蓝色的雪花，e，还挺好看

实现思路

1. 导入一张雪花的图
2. 给雪花加样式还有动画
3. 最后通过js在可视窗口中创建一个新的雪花(大小都是可以自己设置d)

@keyframes animate {
    0% {
        opacity: 1;
        transform: scale(1) rotateZ(0);
    }
    50% {
        opacity: .8;
        transform: scale(1.5) rotateZ(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(2) rotateZ(360deg);
    }
}

代码

html

<div class="myBg">
        <!-- <span><img src="./雪花.png" alt=""></span> -->
</div>

css

* {
    margin: 0;
    padding: 0;
}
body {
    background: #fff;
}

div {
    margin: 100px;
}

span {
    position: absolute;
}
img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation: animate 2s linear infinite;
}

@keyframes animate {
    0% {
        opacity: 1;
        transform: scale(1) rotateZ(0);
    }
    50% {
        opacity: .8;
        transform: scale(1.5) rotateZ(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(2) rotateZ(360deg);
    }
}

js

var bg = document.querySelector('.myBg');
var img = `<img src="./雪花.png" alt="">`

function createSquare() {
    var square = document.createElement('span');

    // 随机位置(0-窗口大小)
    square.style.top = Math.random() * window.innerHeight + 'px';
    square.style.left = Math.random() * window.innerWidth + 'px';

    square.innerHTML = img;
    bg.appendChild(square);
    setTimeout(() => {
        square.remove();
    }, 6000);
};

setInterval(createSquare, 500)

OK，划水划够了就赶紧去学习吧~