雪花飘落-2022虎年大吉

最新推荐文章于 2024-03-06 20:44:31 发布

桐溪漂流

最新推荐文章于 2024-03-06 20:44:31 发布

阅读量93

点赞数

分类专栏：小知识点文章标签： css3 css html

本文链接：https://blog.csdn.net/qq564280420/article/details/122743980

版权

小知识点专栏收录该内容

24 篇文章 0 订阅

订阅专栏

前言

临近虎年春节，又缝下雪，简单弄个雪花飘落，全当玩耍

效果图

在这里插入图片描述

代码展示

代码很简单，一些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);

结尾

怎么样，是不是超简单，哈哈

桐溪漂流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
雪花飘落-2022虎年大吉

前言临近虎年春节，又缝下雪，简单弄个雪花飘落，全当玩耍效果图代码展示代码很简单，一些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" co
复制链接

扫一扫