image.png

  1. <template>
  2.   <view class="page">
  3.     <view
  4.       v-for="(item, index) in Array(18).fill()"
  5.       :key="index"
  6.       class="animation span"
  7.       :data-animation-position="position()"
  8.       :data-animation-delay="delay()"
  9.       :data-animation-timing="timing()"
  10.       :data-animation-duration="duration()"
  11.       :data-animation-name="name()"
  12.       ><image class="image" src="../../static/bonus.png"
  13.     /></view>
  14.   </view>
  15. </template>
  16. <script>
  17. export default {
  18.   data() {
  19.     return {};
  20.   },
  21.   onReady: function() {},
  22.   methods: {
  23.     random(min, max) {
  24.       return Math.floor(Math.random() * (max - min + 1) + min);
  25.     },
  26.     position() {
  27.       return this.random(1, 100);
  28.     },
  29.     delay() {
  30.       return this.random(1, 4);
  31.     },
  32.     duration() {
  33.       return this.random(4, 8);
  34.     },
  35.     name() {
  36.       return this.random(1, 4);
  37.     },
  38.     timing() {
  39.       return ["linear", "ease", "ease-in", "ease-out", "ease-in-out"][
  40.         this.random(0, 4)
  41.       ];
  42.     }
  43.   }
  44. };
  45. </script>
  47. <style lang="scss" scoped>
  48. html,
  49. body,
  50. #app {
  51.   height: 100%;
  52.   background: #000;
  53. }
  54. .page {
  55.   height: 100vh;
  56.   overflow: hidden;
  57.   background: #000;
  58.   position: relative;
  59.   color: #fff;
  60.   .span {
  61.     width: 30upx;
  62.     height: 30upx;
  64.     position: absolute;
  65.     top: -100upx;
  66.     animation-iteration-count: infinite;
  67.     transform-origin: center -30upx;
  68.     transform: translate3d(0, 0, 0);
  69.   }
  70.   .image {
  71.     width: 30upx;
  72.     height: 30upx;
  73.   }
  74. }
  76. // 横向起始位置
  77. @for $i from 1 through 100 {
  78.   .animation[data-animation-position="#{$i}"] {
  79.     left: #{$i}vw;
  80.   }
  81. }
  82. // 降落曲线
  83. $timing: (
  84.   linear: linear,
  85.   ease: ease,
  86.   ease-in: ease-in,
  87.   ease-out: ease-out,
  88.   ease-in-out: ease-in-out
  89. );
  91. @each $key, $value in $timing {
  92.   .animation[data-animation-timing="#{$key}"] {
  93.     transition-timing-function: $value;
  94.   }
  95. }
  97. // 延时时间
  98. @for $i from 1 through 4 {
  99.   .animation[data-animation-delay="#{$i}"] {
  100.     animation-delay: #{$i}s;
  101.   }
  102. }
  104. // 持续时间
  105. @for $i from 4 through 8 {
  106.   .animation[data-animation-duration="#{$i}"] {
  107.     animation-duration: #{$i}s;
  108.   }
  109. }
  111. // 动画
  112. @for $i from 1 through 4 {
  113.   .animation[data-animation-name="#{$i}"] {
  114.     animation-name: fall, swing#{$i}, scaleing#{$i};
  115.   }
  116. }
  118. // 下落
  119. @keyframes fall {
  120.   0% {
  121.     top: -80upx;
  122.     opacity: 1;
  123.   }
  124.   50% {
  125.     opacity: 0.7;
  126.   }
  127.   100% {
  128.     top: 55vh;
  129.     color: red;
  130.     opacity: 0.3;
  131.   }
  132. }
  133. // 左右摇摆
  134. @for $i from 1 through 4 {
  135.   @keyframes swing#{$i} {
  136.     25% {
  137.       transform: translateX(-#{$i * 20}px);
  138.     }
  139.     50% {
  140.       transform: translateX(#{$i * 20}px);
  141.     }
  142.     75% {
  143.       transform: translateX(-#{$i * 20}px);
  144.     }
  145.     100% {
  146.       transform: translateX(#{$i * 20}px);
  147.     }
  148.   }
  149. }
  151. // 透视
  152. @for $i from 1 through 4 {
  153.   @keyframes scaleing#{$i} {
  154.     from {
  155.       transform: scale($i*0.6);
  156.     }
  157.     to {
  158.       transform: scale($i * 1.5);
  159.     }
  160.   }
  161. }
  163. </style>

Note

  1. 主要是css属性选择器配合自定义data-属性的使用
  2. css没有随机数，用scss循环生成多个类，用属性选择器去匹配

参考：
https://juejin.im/post/5c4525ab6fb9a049bb7ca45c