前端小动画之飘落的小雪花

今天给大家带来的是小雪花动画效果，大家学会后也可以与之联想来绘制落叶、流星等效果，那些就交给大家来发挥了，下面是小雪花效果图。

(tips: 风景图和百叶窗效果来源于b站一个仵航的优秀up主，咱这就不再介绍了，大家可以前往他那观看学习哦!)                                                     

 最后有源码哦！！！  

 思路是在顶部那一列的不同位置随机生成各个大小的小雪花，当然，大家也可以随自己的喜好将示例这个小雪花用自己喜欢的雪花图片替换，定制自己专属飘雪特效。

生成小雪花js代码如下:

// 定义一个函数，随机生成不同位置大小的小雪花
function createSnow(){

//首先给每片小雪花一个容器，我们来创建一个div元素并将其添加到body上
  let snowflake = document.createElement('div')
  document.body.appendChild(snowflake)

//然后随机生成雪花尺寸
  let size = Math.round(Math.random()*(30-10)+10)
  snowflake.style.width = size + 'px'
  snowflake.style.height = size + 'px'

//再随机生成雪花出现的位置
  var _left = Math.round(Math.random()*(window.innerWidth-size))
  snowflake.style.left=_left+'px'

//再给雪花添加其他样式，这里用css写的class样式，直接添加到classList，
//当然你也可以像上面一样直接js赋值添加样式和其他动画效果
  snowflake.classList.add('snowflakeStyle')
  snowflake.addEventListener("animationend", ()=>{

//最后当雪花落到底部的动画结束后，移除这片雪花
    document.body.removeChild(snowflake)
  })
}

//记得开启生成雪花的定时器
let timer = setInterval(createSnow,200)

//其次记得离开页面的时候记得清除定时器
window.onbeforeunload = ()=>{
  clearInterval(timer)
}

 上面就是通过js随机生成小雪花的代码，是不是很容易，哈哈，下面是小雪花的css样式和动画效果:

.snowflakeStyle{
  /