前言
临近虎年春节，又缝下雪，简单弄个雪花飘落，全当玩耍
效果图
代码展示
代码很简单，一些css，js，基本的html，加上图片就完事了
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>Snow</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
</body>
<script src="./js/index.js"></script>
</html>
css
html,body{
width: 100%;
height: 100%;
background-color: black;
margin: 0;
padding: 0;
color: #ffffff;
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.avatar{
width: 50%;
height: 100px;
border-radius: 20px;
opacity: 0.8;
background-image: url('../imgs/tiger.png');
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: center;
}
.snow-item{
display: inline-block;
border-radius: 50%;
position: absolute;
animation: snowDown linear;
background-image: url('../imgs/snow.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
@keyframes snowDown {
from {
top: 0;
}
to {
top: 110%;
}
}
js
class Snow {
defaultOption = {
maxSize: 10,// 最大直径
minSize: 2,// 最小直径
bodyWidth: document.body.clientWidth,// body宽度
bodyHeight: document.body.clientHeight,// body高度
duration: 10,// 飘落周期
};
options = null;
timer = null;
queenList = [];
constructor(options){
// 整合用户配置
this.options = Object.assign(this.defaultOption, options);
this.init();
}
init(){
this.create();
this.setListener();
}
create(){
const {
maxSize, minSize, bodyWidth, duration } = this.options;
const size = Number(((maxSize - minSize) * Math.random()).toFixed(1)) + minSize;
const opacity = (0.6 + 0.4 * Math.random()).toFixed(2);
const aSnow = document.createElement('span');
this.ele = aSnow;
aSnow.style.width = size + 'px';
aSnow.style.height = size + 'px';
aSnow.style.left = (bodyWidth - 10) * Math.random() + 'px';
aSnow.style.top = '110%';
aSnow.style.opacity = opacity;
aSnow.style.animationDuration = duration + 's';
aSnow.className = 'snow-item';
document.getElementsByTagName('body')[0].appendChild(aSnow);
}
setListener(){
const {
duration } = this.options;
setTimeout(() => {
this.destroy()
}, duration * 1000);
}
destroy(){
this.ele.remove();
}
}
setInterval(() => {
new Snow({
minSize: 10, maxSize: 20 });
}, 300);
结尾
怎么样，是不是超简单，哈哈
文章评论