分享一個(gè)用js實(shí)現(xiàn)的簡單的雪花效果，效果如下：
雪花效果
簡單說明下，這里的雪花圖標(biāo)來自于iconfont阿里云矢量圖標(biāo)庫，如何使用可以查看我之前發(fā)布的文章《vue項(xiàng)目如何引用阿里云矢量圖標(biāo)庫》，用法都一樣的；話不多說，直接開干。
HTML代碼
<div class="content">
<div class="form-wrapper">
<button class="form" onclick="handleClear()">清除</button>
<button class="form" onclick="handleSnow()">小雪</button>
<button class="form" onclick="handleSnow(5, 10, 16, 300)">中雪</button>
<button class="form" onclick="handleSnow(6, 10, 14, 400)">暴雪</button>
</div>
<div class="wrapper" id="wrapper"></div>
</div>
css代碼
*{
padding: 0;
margin: 0;
}
.content{
width: 100%;
height: 100vh;
position: relative;
background: url("static/bg.jpg") no-repeat;
}
.form-wrapper{
height: 80px;
top: 20px;
left: 20px;
position: absolute;
z-index: 1;
}
.form{
width: 150px;
font-size: 18px;
font-weight: bold;
color: #fff;
background: transparent;
cursor: pointer;
line-height: 40px;
border: 2px solid #fff;
margin: 0 5px;
}
.form:hover{
background-color: rgba(255,255,255, .2);
}
.wrapper{
height: 100%;
width: 100%;
position: relative;
background-repeat: no-repeat;
overflow: hidden;
}
.icon-xuehua{
color: #fff;
position: absolute;
}
js代碼
const SNOW_NUM = 200;
const [MIN_SIZE, RANGE] = [16, 20];
const WIDTH = document.documentElement.clientWidth;
const HEIGHT = document.documentElement.clientHeight;
const wrapper = document.getElementById("wrapper");
const getRandom = (min = 16, range = 20) => Math.round(Math.random() * range + min);
function handleClear() {
wrapper.innerHTML = "";
}
function createSnow(step, min, range) {
const ele = document.createElement("span");
let [left, top] = [getRandom(0, WIDTH - (MIN_SIZE + RANGE)), getRandom(0, HEIGHT - (MIN_SIZE + RANGE))]
ele.className = "iconfont icon-xuehua";
ele.style.fontSize = `${getRandom(MIN_SIZE, RANGE)}px`;
ele.style.left = `${left}px`
ele.style.top = `${top}px`
wrapper.appendChild(ele)
setInterval(() => {
if (top >= HEIGHT - (MIN_SIZE + RANGE)) {
top = 0;
}
top = top + step;
ele.style.top = `${top}px`
}, getRandom(min, range))
}
function handleSnow(step = 4, min = 10, range = 20,num = SNOW_NUM) {
handleClear();
for(let i = 0; i < num; i ++) {
createSnow(step, min, range);
}
}
handleSnow();
基本原理就是通過定位，讓元素隨機(jī)定位到瀏覽器窗口中，利用定時(shí)器定時(shí)改變元素的top值，然后再對元素進(jìn)行邊界判斷。
