微信小程序实现雪花飘落的效果

1.实现效果

snows.gif

2.实现原理

• 基于页面进行fix定位，循环雪花图片，动态设置雪花定位，并添加动画效果。
• 设置不同的大小，nth-child选择偶数位置的雪花大小稍大。

3.实现代码

<scroll-view scroll-y="true">
  <!-- 页面内容 -->
</scroll-view>
<view>
  <image wx:for="{{snows}}" wx:key="index" src="../img/snow.png" style="left:{{snows[index]}}rpx" animation="{{animation[index]}}" class='snow' data-index='{{index}}' />
</view>

page {
  background: linear-gradient(180deg, #6699CC 0%, #B8DBF0 100%);
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
  height: 100%;
}

.snow {
  width: fit-content;
  position: absolute;
  top: -100rpx;
  width: 30rpx;
  height: 27rpx;
  z-index: 11;
}

.snow:nth-child(2n+2) {
  width: 35rpx;
  height: 33rpx;
}

var i = 0;
Page({


  data: {
    snows: [],
    animation: [],
    dateTime: "",
  },

  onShow: function () {
    this.initSnow();
    this.data.snows = [];
    this.data.animation = [];
   ......
  },


 ......

})

4.完整代码，尽在公众号'苏苏的bug',更多小程序demo，关注苏苏的码云，如果对你有用，欢迎您的star+订阅！