今天是七夕节用100行CSS代码下一场流星雨许一个愿来一场美丽的邂逅

Posted 2021-09-06 蒙娜丽宁

今天是七夕节、用100行代码下一场流星雨、许一个愿、来一场美丽的邂逅

        这个程序的核心使用CSS实现，基本原理就是利用CSS控制若干个div，本例是50个，当然，你可以弄更多的div，不过适当的流星是浪漫，如果流行太多了，恐龙就要灭绝了！

        现在说一下基本实现原理，首先用js动态产生若干个div，看下面的代码：

var stars = '';
for(var i = 0; i < 50;i++) {
  var starTailLengthStyle = "--star-tail-length: " + (5 + Math.random() * 4) + "em;"
  var topOffsetStyle = "--top-offset:"  + (4 + Math.random() * 100) + "vh;"
  var fallDurationStyle = "--fall-duration:" + (2 + Math.random() * 10) + "s;"
  var fallDelay = "--fall-delay:" + Math.random() * 5 + "s;"
  stars += "<div class='star' style='" +
          starTailLengthStyle +
          topOffsetStyle +
          fallDurationStyle +
          fallDelay + "'></div>\\r\\n";;
}
document.body.innerhtml="<div class='stars'>" + stars + "</div>";

        这段代码产生了51个div，其中1个div是最外层的div，另外50个div要放在这个div中。最外层div的class是stars，其他50个div的class是star。 另外还在style中加入了一些属性，用于随机控制每一颗流行的属性，如尾巴长短，跌落时间等。

        接下来在添加下面的样式用来描述stars，用来控制星星整体的初始位置。

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  transform: rotate(-45deg);
}

        然后编写下面的star样式，这些样式用来控制每一颗星星的初始状态，var描述相关的变量。 

.star {
  --star-color: var(--primary-color);
  --star-tail-length: 6em;
  --star-tail-height: 2px;
  --star-width: calc(var(--star-tail-length) / 6);
  --fall-duration: 9s;
  --tail-fade-duration: var(--fall-duration);
  position: absolute;
  top: var(--top-offset);
  left: 1700px;
  width: var(--star-tail-length);
  height: var(--star-tail-height);
  color: var(--star-color);
  background: linear-gradient(45deg, currentColor, transparent);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px currentColor);
  transform: translate3d(70em, 0, 0);
  animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}

        剩下的就是一些控制流星跌落过程中样式的，如下面的代码用来控制流星尾部在跌落过程中的变化。

@keyframes tail-fade {
  0%, 50% {
    width: var(--star-tail-length);
    opacity: 1;
  }
  70%, 80% {
    width: 0;
    opacity: 0.6;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}