css流星雨特效

先上效果

流星雨.gif

注意事项

由于是用的纯css，所以为了实现很多雨点，我们就需要创建很多个 span/div（ 数量适量多即可）
然后,我们还需要用CSS预处理器之sass

首先VSCode安装 Easy Sass的插件

sass.png

然后 在css文件夹创建 流星雨.scss（注意：后缀是scss)

流星雨scss.png

然后随便写点css样式，保存，就会自动生成同名字的css文件

流星雨css.png

之后引入同名的css就可以啦,至于为什么要用scss,因为很多个 span/div 的样式，然后还要想随机数，你不会想被累死吧!!

下面是html代码

HTML代码

    <div class="box">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>

建议直接使用快捷语法 span*15 加回车,直接创建出15个span

scss代码

* {
  margin: 0;
  padding: 0;
}
body {
  overflow: hidden;
  // 溢出隐藏
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  // 绝对定位
  width: 100%;
  height: 100vh;
  // 宽高100% vh是视窗百分比高度,1vh是1%
  background: black;
  // 黑色背景
}
span {
  position: absolute;
  top: 50%;
  left: 50%;
  // 绝对定位
  width: 4px;
  height: 4px;
  // 宽高
  background: #ffffff;
  // 白色背景
  border-radius: 50%;
  // 边框圆角
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
    0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 1);
  // 盒子阴影
}
span::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateX(0);
  // 位置偏移 x轴,用于调整光点位置
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, #fff, transparent);
  // 创建一个表示两种或多种颜色线性渐变的图片
}

@for $i from 1 through 185 {
  span:nth-child(#{$i}) {
    top: #{random(300)}px;
    right: #{random(700)}px;
    // random() 随机数 700相当于700以内的随机整数
    left: initial;
    // 因为同时设置left  和 right的话，left的权重比较高，此时right不生效。所以把left设置为initial，恢复为默认的样式，此时再设置right的值就会生效了。
    animation: animate #{random(2) + random()}s linear #{random(5)- random()}s infinite;
    //  添加动画
  }
}

@keyframes animate {
  0% {
    transform: rotate(315deg) translateX(-100px);
    // 旋转加偏移
    opacity: 1;
    // 透明度 值为0-1
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: rotate(315deg) translateX(-1000px);
    opacity: 0;
  }
}

由于是外链式,所以大家复制粘贴拼接一下就可啦!要记得引入css文件哦!! 谢谢观赏!!!