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

拼搏现实的明天。 2022-09-04 13:50 113阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25va2lhZ3V5_size_16_color_FFFFFF_t_70][]

今天是七夕节、用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;
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25va2lhZ3V5_size_16_color_FFFFFF_t_70]: /images/20220829/ec70f5e16b344f0b8af010f7f3619b38.png