6

暗夜发光,独自闪耀,盘点网页暗黑模式(DarkMode)下的特效和动效,CSS3实现

 7 months ago
source link: https://v3u.cn/a_id_294
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

暗夜发光,独自闪耀,盘点网页暗黑模式(DarkMode)下的特效和动效,CSS3实现

首页 - Web Design/2023-03-23
暗夜发光,独自闪耀,盘点网页暗黑模式(DarkMode)下的特效和动效,CSS3实现

    众所周知，网页的暗黑模式可以减少屏幕反射和蓝光辐射，减少眼睛的疲劳感，特别是在夜间使用时更为明显。其实暗黑模式也给霓虹灯效应（Neon Effect）提供了发挥的环境。

    霓虹灯效应是一种视觉效果，其特点是在深色背景上使用鲜艳的颜色来产生强烈的视觉冲击。这种效应通常用于设计海报、广告、标志和网页等。霓虹灯效应的作用在于吸引人们的注意力和增强品牌形象的辨识度，因为这种效果让人印象深刻且易于记忆，本次我们盘点适合暗色模式的网页特效，还是喜欢，暗夜的你。

    暗黑模式下最炫酷的效果无外乎发光，基本上页面元素的发光需要依赖box-shadow属性：

logo {
  width: 150px;
  height: 150px;
  background-color: #fff;

box-shadow: 120px 80px 40px 20px #0ff;
  /* in order: x offset, y offset, blur size, spread size, color */
  /* blur size and spread size are optional (they default to 0) */
}

    这里使用多个阴影值来创建分层效果。您可以用逗号分隔多个阴影值，它们将叠加在彼此上面。

    但是这种效果比较单调，box-shadow属性只会保持所在的元素的形状上发光，如果我们想让一个元素的发光效果比较有层次感，那么就需要border-radius属性的配合。

    我们可以通过给出多组值（用逗号分隔）来在一个元素上堆叠多个发光效果。发光效果将首先堆叠在顶部，最后一个堆叠在底部：

div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow:
    0 0 60px 30px #fff,  /* inner white */
    0 0 100px 60px #f0f, /* middle magenta */
    0 0 140px 90px #0ff; /* outer cyan */
}

    说白了就是渐进的光晕效果，最内层往最内层逐渐减淡：

20230322100330_56258.png

    配合动画特效，比如animation属性：

.logo {

pointer-events: auto;
font-size: 1rem;
width: 2.5em;
height: 9em;
transform-origin: center top;
animation: swing 3s ease-in-out infinite alternate;
position: absolute;
left: calc(50% - 1.3rem);
top: calc(clamp(4em,8vmin,12vw) + .5rem);
transform-style: preserve3d;
transition: transform .5s ease-out;
cursor: pointer;
display: block;
background: 0 0;
border: none;
-webkit-appearance: none;
padding: 0;

}

    随后结合box-shadow：

.light-bulb__image:before {
content: "";
position: absolute;
left: calc(50% - 1px);
bottom: 0;
width: .625em;
height: .625em;
background: 0 0;
border-radius: 50%;
z-index: -1;
box-shadow: 0 0 6.375em 4em #00fdcf;
opacity: .6;
transform: scaleY(.7) translateY(-1em) translateX(.4em);
transform-origin: center top;
}

    我们就可以营造出这种“冷灯看剑，剑上几番功名”的特效：

20230322100345_93718.gif

    对于SVG图片来说，不建议使用box-shadow，因为没法应用到path实体，这里建议使用filter属性：

.shadow_filter{

filter: drop-shadow(0px 0px 25px #116466);

}

    这里通过第三个参数25px来控制发光的亮度，第四个参数可以改变颜色，暗色发光与亮色不发光的对比：

20230322160319_37095.png

    发光体与动画结合

    除了静态的发光体，我们也可以让发光体“动”起来，首先建立发光体容器：

<div class="glowing">

<span style="--i:1;"></span>

<span style="--i:2;"></span>

<span style="--i:3;"></span>

</div>

<div class="glowing">

<span style="--i:1;"></span>

<span style="--i:2;"></span>

<span style="--i:3;"></span>

</div>

<div class="glowing">

<span style="--i:1;"></span>

<span style="--i:2;"></span>

<span style="--i:3;"></span>

</div>

<div class="glowing">

<span style="--i:1;"></span>

<span style="--i:2;"></span>

<span style="--i:3;"></span>

</div>

    随后针对glowing容器添加动效：

.glowing {
  position: relative;
  min-width: 700px;
  height: 550px;
  margin: -150px;
  transform-origin: right;
  animation: colorChange 5s linear infinite;
}

.glowing:nth-child(even) {
  transform-origin: left;
}

@keyframes colorChange {
  0% {
    filter: hue-rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
    transform: rotate(360deg);
  }
}

.glowing span {
  position: absolute;
  top: calc(80px * var(--i));
  left: calc(80px * var(--i));
  bottom: calc(80px * var(--i));
  right: calc(80px * var(--i));
}

.glowing span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 15px;
  height: 15px;
  background: #f00;
  border-radius: 50%;
}

.glowing span:nth-child(3n + 1)::before {
  background: rgba(134,255,0,1);
  box-shadow: 0 0 20px rgba(134,255,0,1),
    0 0 40px rgba(134,255,0,1),
    0 0 60px rgba(134,255,0,1),
    0 0 80px rgba(134,255,0,1),
    0 0 0 8px rgba(134,255,0,.1);
}

.glowing span:nth-child(3n + 2)::before {
  background: rgba(255,214,0,1);
  box-shadow: 0 0 20px rgba(255,214,0,1),
    0 0 40px rgba(255,214,0,1),
    0 0 60px rgba(255,214,0,1),
    0 0 80px rgba(255,214,0,1),
    0 0 0 8px rgba(255,214,0,.1);
}

.glowing span:nth-child(3n + 3)::before {
  background: rgba(0,226,255,1);
  box-shadow: 0 0 20px rgba(0,226,255,1),
    0 0 40px rgba(0,226,255,1),
    0 0 60px rgba(0,226,255,1),
    0 0 80px rgba(0,226,255,1),
    0 0 0 8px rgba(0,226,255,.1);
}

.glowing span:nth-child(3n + 1) {
  animation: animate 10s alternate infinite;
}

.glowing span:nth-child(3n + 2) {
  animation: animate-reverse 3s alternate infinite;
}

.glowing span:nth-child(3n + 3) {
  animation: animate 8s alternate infinite; 
}

@keyframes animate {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-reverse {
  0% {
    transform: rotate(360deg);
  }

50% {
    transform: rotate(180deg);
  }

100% {
    transform: rotate(0deg);
  }
}

    这里通过colorChange方法来动态改变容器的位置和颜色，效果如下：

20230322160327_34509.png

    萤火虫特效

    在移动发光体的基础上，我们可以继续精进，打造萤火虫的效果，首先创建元素容器：

<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>

    这里容器越多，萤火虫越密集。

    随后将容器样式改成fixed定位，让萤火虫跟随窗口移动：

firefly {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0.4vw;
  height: 0.4vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 200s alternate infinite;
  pointer-events: none;
}
.firefly::before, .firefly::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}
.firefly::before {
  background: black;
  opacity: 0.4;
  animation: drift ease alternate infinite;
}
.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw yellow;
  animation: drift ease alternate infinite, flash ease infinite;
}

.firefly:nth-child(1) {
  animation-name: move1;
}
.firefly:nth-child(1)::before {
  animation-duration: 10s;
}
.firefly:nth-child(1)::after {
  animation-duration: 10s, 10206ms;
  animation-delay: 0ms, 8110ms;
}

    随后编写移动动画，让萤火虫进行不规则运动：

@keyframes move1 {
  0% {
    transform: translateX(-2vw) translateY(49vh) scale(0.6);
  }
  4.7619047619% {
    transform: translateX(-21vw) translateY(-20vh) scale(0.88);
  }
  9.5238095238% {
    transform: translateX(19vw) translateY(-20vh) scale(0.95);
  }
  14.2857142857% {
    transform: translateX(-13vw) translateY(7vh) scale(0.66);
  }
  19.0476190476% {
    transform: translateX(12vw) translateY(23vh) scale(0.35);
  }
  23.8095238095% {
    transform: translateX(10vw) translateY(2vh) scale(0.83);
  }
  28.5714285714% {
    transform: translateX(-22vw) translateY(29vh) scale(0.89);
  }
  33.3333333333% {
    transform: translateX(26vw) translateY(7vh) scale(0.61);
  }
  38.0952380952% {
    transform: translateX(45vw) translateY(9vh) scale(0.73);
  }
  42.8571428571% {
    transform: translateX(8vw) translateY(-24vh) scale(0.97);
  }
  47.619047619% {
    transform: translateX(43vw) translateY(40vh) scale(0.96);
  }
  52.380952381% {
    transform: translateX(-32vw) translateY(-44vh) scale(0.84);
  }
  57.1428571429% {
    transform: translateX(18vw) translateY(32vh) scale(0.53);
  }
  61.9047619048% {
    transform: translateX(5vw) translateY(-9vh) scale(0.96);
  }
  66.6666666667% {
    transform: translateX(-46vw) translateY(3vh) scale(0.58);
  }
  71.4285714286% {
    transform: translateX(-3vw) translateY(-21vh) scale(0.74);
  }
  76.1904761905% {
    transform: translateX(16vw) translateY(2vh) scale(0.9);
  }
  80.9523809524% {
    transform: translateX(20vw) translateY(46vh) scale(0.77);
  }
  85.7142857143% {
    transform: translateX(12vw) translateY(-23vh) scale(0.8);
  }
  90.4761904762% {
    transform: translateX(8vw) translateY(-24vh) scale(0.73);
  }
  95.2380952381% {
    transform: translateX(-35vw) translateY(-11vh) scale(0.47);
  }
  100% {
    transform: translateX(22vw) translateY(24vh) scale(0.93);
  }
}
.firefly:nth-child(2) {
  animation-name: move2;
}
.firefly:nth-child(2)::before {
  animation-duration: 10s;
}
.firefly:nth-child(2)::after {
  animation-duration: 10s, 6664ms;
  animation-delay: 0ms, 4112ms;
}

@keyframes move2 {
  0% {
    transform: translateX(-3vw) translateY(13vh) scale(1);
  }
  4% {
    transform: translateX(0vw) translateY(-4vh) scale(0.79);
  }
  8% {
    transform: translateX(-1vw) translateY(-41vh) scale(0.84);
  }
  12% {
    transform: translateX(-43vw) translateY(3vh) scale(0.73);
  }
  16% {
    transform: translateX(17vw) translateY(-39vh) scale(0.26);
  }
  20% {
    transform: translateX(9vw) translateY(34vh) scale(0.57);
  }
  24% {
    transform: translateX(25vw) translateY(-44vh) scale(0.42);
  }
  28% {
    transform: translateX(-15vw) translateY(-1vh) scale(0.62);
  }
  32% {
    transform: translateX(36vw) translateY(10vh) scale(0.89);
  }
  36% {
    transform: translateX(-12vw) translateY(-41vh) scale(0.82);
  }
  40% {
    transform: translateX(-1vw) translateY(42vh) scale(0.35);
  }
  44% {
    transform: translateX(6vw) translateY(9vh) scale(0.93);
  }
  48% {
    transform: translateX(12vw) translateY(35vh) scale(0.87);
  }
  52% {
    transform: translateX(-10vw) translateY(-33vh) scale(0.85);
  }
  56% {
    transform: translateX(17vw) translateY(-24vh) scale(0.6);
  }
  60% {
    transform: translateX(26vw) translateY(-4vh) scale(0.59);
  }
  64% {
    transform: translateX(8vw) translateY(-42vh) scale(0.71);
  }
  68% {
    transform: translateX(-22vw) translateY(16vh) scale(0.79);
  }
  72% {
    transform: translateX(2vw) translateY(17vh) scale(0.42);
  }
  76% {
    transform: translateX(22vw) translateY(-35vh) scale(0.68);
  }
  80% {
    transform: translateX(-19vw) translateY(17vh) scale(0.36);
  }
  84% {
    transform: translateX(-42vw) translateY(-12vh) scale(0.96);
  }
  88% {
    transform: translateX(-29vw) translateY(-9vh) scale(0.46);
  }
  92% {
    transform: translateX(-41vw) translateY(19vh) scale(0.27);
  }
  96% {
    transform: translateX(-7vw) translateY(32vh) scale(0.65);
  }
  100% {
    transform: translateX(-2vw) translateY(-40vh) scale(0.92);
  }
}
.firefly:nth-child(3) {
  animation-name: move3;
}
.firefly:nth-child(3)::before {
  animation-duration: 10s;
}
.firefly:nth-child(3)::after {
  animation-duration: 10s, 6237ms;
  animation-delay: 0ms, 6828ms;
}

@keyframes move3 {
  0% {
    transform: translateX(6vw) translateY(-31vh) scale(0.94);
  }
  5.5555555556% {
    transform: translateX(-5vw) translateY(36vh) scale(0.61);
  }
  11.1111111111% {
    transform: translateX(0vw) translateY(18vh) scale(0.32);
  }
  16.6666666667% {
    transform: translateX(-34vw) translateY(-43vh) scale(0.36);
  }
  22.2222222222% {
    transform: translateX(24vw) translateY(6vh) scale(0.92);
  }
  27.7777777778% {
    transform: translateX(16vw) translateY(-20vh) scale(0.43);
  }
  33.3333333333% {
    transform: translateX(1vw) translateY(27vh) scale(0.46);
  }
  38.8888888889% {
    transform: translateX(7vw) translateY(50vh) scale(0.8);
  }
  44.4444444444% {
    transform: translateX(24vw) translateY(10vh) scale(0.89);
  }
  50% {
    transform: translateX(48vw) translateY(23vh) scale(0.71);
  }
  55.5555555556% {
    transform: translateX(43vw) translateY(-5vh) scale(0.81);
  }
  61.1111111111% {
    transform: translateX(27vw) translateY(-40vh) scale(0.94);
  }
  66.6666666667% {
    transform: translateX(48vw) translateY(-39vh) scale(0.78);
  }
  72.2222222222% {
    transform: translateX(-10vw) translateY(-40vh) scale(0.77);
  }
  77.7777777778% {
    transform: translateX(2vw) translateY(4vh) scale(0.55);
  }
  83.3333333333% {
    transform: translateX(41vw) translateY(-26vh) scale(0.67);
  }
  88.8888888889% {
    transform: translateX(-20vw) translateY(41vh) scale(0.61);
  }
  94.4444444444% {
    transform: translateX(14vw) translateY(-6vh) scale(0.66);
  }
  100% {
    transform: translateX(-17vw) translateY(-20vh) scale(0.91);
  }
}
.firefly:nth-child(4) {
  animation-name: move4;
}
.firefly:nth-child(4)::before {
  animation-duration: 11s;
}
.firefly:nth-child(4)::after {
  animation-duration: 11s, 6607ms;
  animation-delay: 0ms, 8453ms;
}

@keyframes move4 {
  0% {
    transform: translateX(-4vw) translateY(21vh) scale(0.76);
  }
  4.1666666667% {
    transform: translateX(50vw) translateY(-3vh) scale(0.37);
  }
  8.3333333333% {
    transform: translateX(-15vw) translateY(-5vh) scale(0.65);
  }
  12.5% {
    transform: translateX(-47vw) translateY(-43vh) scale(0.29);
  }
  16.6666666667% {
    transform: translateX(32vw) translateY(21vh) scale(0.56);
  }
  20.8333333333% {
    transform: translateX(45vw) translateY(-39vh) scale(0.68);
  }
  25% {
    transform: translateX(-5vw) translateY(24vh) scale(0.72);
  }
  29.1666666667% {
    transform: translateX(-20vw) translateY(-46vh) scale(0.53);
  }
  33.3333333333% {
    transform: translateX(22vw) translateY(-36vh) scale(1);
  }
  37.5% {
    transform: translateX(41vw) translateY(-39vh) scale(0.62);
  }
  41.6666666667% {
    transform: translateX(14vw) translateY(-28vh) scale(0.47);
  }
  45.8333333333% {
    transform: translateX(-11vw) translateY(-22vh) scale(0.39);
  }
  50% {
    transform: translateX(11vw) translateY(12vh) scale(0.37);
  }
  54.1666666667% {
    transform: translateX(10vw) translateY(34vh) scale(0.69);
  }
  58.3333333333% {
    transform: translateX(-26vw) translateY(1vh) scale(0.94);
  }
  62.5% {
    transform: translateX(-42vw) translateY(-23vh) scale(0.83);
  }
  66.6666666667% {
    transform: translateX(-19vw) translateY(37vh) scale(0.63);
  }
  70.8333333333% {
    transform: translateX(-48vw) translateY(21vh) scale(0.62);
  }
  75% {
    transform: translateX(2vw) translateY(-19vh) scale(0.51);
  }
  79.1666666667% {
    transform: translateX(3vw) translateY(50vh) scale(0.95);
  }
  83.3333333333% {
    transform: translateX(-2vw) translateY(-4vh) scale(0.62);
  }
  87.5% {
    transform: translateX(-35vw) translateY(-3vh) scale(0.84);
  }
  91.6666666667% {
    transform: translateX(35vw) translateY(-49vh) scale(0.46);
  }
  95.8333333333% {
    transform: translateX(35vw) translateY(41vh) scale(0.73);
  }
  100% {
    transform: translateX(12vw) translateY(4vh) scale(0.55);
  }
}
.firefly:nth-child(5) {
  animation-name: move5;
}
.firefly:nth-child(5)::before {
  animation-duration: 16s;
}
.firefly:nth-child(5)::after {
  animation-duration: 16s, 6469ms;
  animation-delay: 0ms, 7253ms;
}

@keyframes move5 {
  0% {
    transform: translateX(6vw) translateY(19vh) scale(0.64);
  }
  5.5555555556% {
    transform: translateX(-24vw) translateY(48vh) scale(1);
  }
  11.1111111111% {
    transform: translateX(24vw) translateY(-17vh) scale(0.9);
  }
  16.6666666667% {
    transform: translateX(-45vw) translateY(-25vh) scale(0.38);
  }
  22.2222222222% {
    transform: translateX(6vw) translateY(11vh) scale(0.92);
  }
  27.7777777778% {
    transform: translateX(25vw) translateY(-31vh) scale(0.85);
  }
  33.3333333333% {
    transform: translateX(-36vw) translateY(36vh) scale(1);
  }
  38.8888888889% {
    transform: translateX(-22vw) translateY(-44vh) scale(0.28);
  }
  44.4444444444% {
    transform: translateX(-1vw) translateY(-23vh) scale(0.33);
  }
  50% {
    transform: translateX(-39vw) translateY(34vh) scale(0.35);
  }
  55.5555555556% {
    transform: translateX(-24vw) translateY(17vh) scale(0.82);
  }
  61.1111111111% {
    transform: translateX(50vw) translateY(-38vh) scale(0.65);
  }
  66.6666666667% {
    transform: translateX(-36vw) translateY(19vh) scale(0.43);
  }
  72.2222222222% {
    transform: translateX(13vw) translateY(-13vh) scale(0.71);
  }
  77.7777777778% {
    transform: translateX(48vw) translateY(21vh) scale(0.86);
  }
  83.3333333333% {
    transform: translateX(-14vw) translateY(-48vh) scale(0.49);
  }
  88.8888888889% {
    transform: translateX(6vw) translateY(-11vh) scale(0.63);
  }
  94.4444444444% {
    transform: translateX(-40vw) translateY(39vh) scale(0.66);
  }
  100% {
    transform: translateX(-9vw) translateY(31vh) scale(0.62);
  }
}
.firefly:nth-child(6) {
  animation-name: move6;
}
.firefly:nth-child(6)::before {
  animation-duration: 17s;
}
.firefly:nth-child(6)::after {
  animation-duration: 17s, 6598ms;
  animation-delay: 0ms, 5641ms;
}

@keyframes move6 {
  0% {
    transform: translateX(17vw) translateY(-31vh) scale(0.32);
  }
  3.5714285714% {
    transform: translateX(-20vw) translateY(1vh) scale(0.66);
  }
  7.1428571429% {
    transform: translateX(2vw) translateY(42vh) scale(0.32);
  }
  10.7142857143% {
    transform: translateX(22vw) translateY(-8vh) scale(0.72);
  }
  14.2857142857% {
    transform: translateX(16vw) translateY(-32vh) scale(0.62);
  }
  17.8571428571% {
    transform: translateX(14vw) translateY(-37vh) scale(0.98);
  }
  21.4285714286% {
    transform: translateX(-42vw) translateY(-23vh) scale(0.76);
  }
  25% {
    transform: translateX(15vw) translateY(24vh) scale(0.91);
  }
  28.5714285714% {
    transform: translateX(-11vw) translateY(26vh) scale(0.95);
  }
  32.1428571429% {
    transform: translateX(34vw) translateY(10vh) scale(0.29);
  }
  35.7142857143% {
    transform: translateX(43vw) translateY(-14vh) scale(0.33);
  }
  39.2857142857% {
    transform: translateX(5vw) translateY(-49vh) scale(0.48);
  }
  42.8571428571% {
    transform: translateX(30vw) translateY(32vh) scale(0.52);
  }
  46.4285714286% {
    transform: translateX(-43vw) translateY(-8vh) scale(0.61);
  }
  50% {
    transform: translateX(-3vw) translateY(4vh) scale(0.85);
  }
  53.5714285714% {
    transform: translateX(0vw) translateY(-17vh) scale(0.31);
  }
  57.1428571429% {
    transform: translateX(-24vw) translateY(-37vh) scale(0.9);
  }
  60.7142857143% {
    transform: translateX(-22vw) translateY(-30vh) scale(0.87);
  }
  64.2857142857% {
    transform: translateX(39vw) translateY(10vh) scale(0.98);
  }
  67.8571428571% {
    transform: translateX(26vw) translateY(-6vh) scale(0.99);
  }
  71.4285714286% {
    transform: translateX(7vw) translateY(32vh) scale(0.79);
  }
  75% {
    transform: translateX(-15vw) translateY(47vh) scale(0.28);
  }
  78.5714285714% {
    transform: translateX(46vw) translateY(49vh) scale(0.92);
  }
  82.1428571429% {
    transform: translateX(-46vw) translateY(-6vh) scale(0.98);
  }
  85.7142857143% {
    transform: translateX(-48vw) translateY(-33vh) scale(0.26);
  }
  89.2857142857% {
    transform: translateX(6vw) translateY(44vh) scale(0.76);
  }
  92.8571428571% {
    transform: translateX(32vw) translateY(36vh) scale(0.49);
  }
  96.4285714286% {
    transform: translateX(43vw) translateY(-4vh) scale(0.82);
  }
  100% {
    transform: translateX(3vw) translateY(-7vh) scale(0.33);
  }
}
.firefly:nth-child(7) {
  animation-name: move7;
}
.firefly:nth-child(7)::before {
  animation-duration: 9s;
}
.firefly:nth-child(7)::after {
  animation-duration: 9s, 5517ms;
  animation-delay: 0ms, 648ms;
}

@keyframes move7 {
  0% {
    transform: translateX(-17vw) translateY(-6vh) scale(0.35);
  }
  4% {
    transform: translateX(37vw) translateY(36vh) scale(0.33);
  }
  8% {
    transform: translateX(42vw) translateY(45vh) scale(0.5);
  }
  12% {
    transform: translateX(-30vw) translateY(-3vh) scale(0.87);
  }
  16% {
    transform: translateX(43vw) translateY(-38vh) scale(0.27);
  }
  20% {
    transform: translateX(-3vw) translateY(-14vh) scale(1);
  }
  24% {
    transform: translateX(6vw) translateY(-4vh) scale(0.31);
  }
  28% {
    transform: translateX(41vw) translateY(-3vh) scale(0.32);
  }
  32% {
    transform: translateX(-27vw) translateY(12vh) scale(0.47);
  }
  36% {
    transform: translateX(31vw) translateY(-42vh) scale(0.99);
  }
  40% {
    transform: translateX(-3vw) translateY(-2vh) scale(0.3);
  }
  44% {
    transform: translateX(-9vw) translateY(45vh) scale(0.64);
  }
  48% {
    transform: translateX(27vw) translateY(-11vh) scale(0.47);
  }
  52% {
    transform: translateX(-38vw) translateY(16vh) scale(0.55);
  }
  56% {
    transform: translateX(-18vw) translateY(31vh) scale(0.68);
  }
  60% {
    transform: translateX(-8vw) translateY(-45vh) scale(0.45);
  }
  64% {
    transform: translateX(-29vw) translateY(-9vh) scale(0.8);
  }
  68% {
    transform: translateX(-4vw) translateY(-2vh) scale(0.69);
  }
  72% {
    transform: translateX(14vw) translateY(42vh) scale(0.34);
  }
  76% {
    transform: translateX(31vw) translateY(19vh) scale(0.97);
  }
  80% {
    transform: translateX(-27vw) translateY(3vh) scale(0.83);
  }
  84% {
    transform: translateX(-25vw) translateY(32vh) scale(0.47);
  }
  88% {
    transform: translateX(-10vw) translateY(6vh) scale(0.63);
  }
  92% {
    transform: translateX(-6vw) translateY(-40vh) scale(0.28);
  }
  96% {
    transform: translateX(10vw) translateY(-18vh) scale(0.92);
  }
  100% {
    transform: translateX(48vw) translateY(-22vh) scale(0.87);
  }
}
.firefly:nth-child(8) {
  animation-name: move8;
}
.firefly:nth-child(8)::before {
  animation-duration: 17s;
}
.firefly:nth-child(8)::after {
  animation-duration: 17s, 8764ms;
  animation-delay: 0ms, 5715ms;
}

@keyframes move8 {
  0% {
    transform: translateX(-39vw) translateY(-48vh) scale(0.53);
  }
  4.1666666667% {
    transform: translateX(-34vw) translateY(-14vh) scale(0.32);
  }
  8.3333333333% {
    transform: translateX(24vw) translateY(-38vh) scale(0.6);
  }
  12.5% {
    transform: translateX(-24vw) translateY(8vh) scale(0.86);
  }
  16.6666666667% {
    transform: translateX(21vw) translateY(-38vh) scale(0.5);
  }
  20.8333333333% {
    transform: translateX(13vw) translateY(-2vh) scale(0.74);
  }
  25% {
    transform: translateX(38vw) translateY(-5vh) scale(0.79);
  }
  29.1666666667% {
    transform: translateX(-7vw) translateY(-33vh) scale(0.81);
  }
  33.3333333333% {
    transform: translateX(-33vw) translateY(34vh) scale(0.31);
  }
  37.5% {
    transform: translateX(41vw) translateY(24vh) scale(0.97);
  }
  41.6666666667% {
    transform: translateX(12vw) translateY(8vh) scale(0.34);
  }
  45.8333333333% {
    transform: translateX(-21vw) translateY(-11vh) scale(0.35);
  }
  50% {
    transform: translateX(-43vw) translateY(19vh) scale(0.46);
  }
  54.1666666667% {
    transform: translateX(32vw) translateY(44vh) scale(0.71);
  }
  58.3333333333% {
    transform: translateX(32vw) translateY(-10vh) scale(0.94);
  }
  62.5% {
    transform: translateX(-34vw) translateY(-45vh) scale(0.67);
  }
  66.6666666667% {
    transform: translateX(13vw) translateY(-47vh) scale(0.97);
  }
  70.8333333333% {
    transform: translateX(0vw) translateY(-10vh) scale(0.27);
  }
  75% {
    transform: translateX(-25vw) translateY(35vh) scale(0.33);
  }
  79.1666666667% {
    transform: translateX(-16vw) translateY(33vh) scale(0.84);
  }
  83.3333333333% {
    transform: translateX(-26vw) translateY(-32vh) scale(0.88);
  }
  87.5% {
    transform: translateX(38vw) translateY(34vh) scale(0.55);
  }
  91.6666666667% {
    transform: translateX(46vw) translateY(23vh) scale(0.26);
  }
  95.8333333333% {
    transform: translateX(-1vw) translateY(32vh) scale(0.73);
  }
  100% {
    transform: translateX(-24vw) translateY(-8vh) scale(0.61);
  }
}
.firefly:nth-child(9) {
  animation-name: move9;
}
.firefly:nth-child(9)::before {
  animation-duration: 17s;
}
.firefly:nth-child(9)::after {
  animation-duration: 17s, 6466ms;
  animation-delay: 0ms, 1191ms;
}

@keyframes move9 {
  0% {
    transform: translateX(37vw) translateY(50vh) scale(0.91);
  }
  5% {
    transform: translateX(-7vw) translateY(38vh) scale(0.31);
  }
  10% {
    transform: translateX(-36vw) translateY(-28vh) scale(0.58);
  }
  15% {
    transform: translateX(-8vw) translateY(-31vh) scale(0.59);
  }
  20% {
    transform: translateX(-31vw) translateY(32vh) scale(0.96);
  }
  25% {
    transform: translateX(-48vw) translateY(-26vh) scale(0.4);
  }
  30% {
    transform: translateX(-12vw) translateY(-45vh) scale(0.81);
  }
  35% {
    transform: translateX(-26vw) translateY(35vh) scale(0.37);
  }
  40% {
    transform: translateX(40vw) translateY(49vh) scale(0.5);
  }
  45% {
    transform: translateX(1vw) translateY(23vh) scale(0.72);
  }
  50% {
    transform: translateX(44vw) translateY(-29vh) scale(0.53);
  }
  55% {
    transform: translateX(30vw) translateY(-2vh) scale(0.9);
  }
  60% {
    transform: translateX(-17vw) translateY(-38vh) scale(0.5);
  }
  65% {
    transform: translateX(-34vw) translateY(-40vh) scale(0.69);
  }
  70% {
    transform: translateX(16vw) translateY(22vh) scale(0.74);
  }
  75% {
    transform: translateX(-24vw) translateY(-8vh) scale(0.93);
  }
  80% {
    transform: translateX(30vw) translateY(24vh) scale(0.88);
  }
  85% {
    transform: translateX(-46vw) translateY(33vh) scale(0.42);
  }
  90% {
    transform: translateX(-7vw) translateY(24vh) scale(0.8);
  }
  95% {
    transform: translateX(47vw) translateY(-20vh) scale(0.55);
  }
  100% {
    transform: translateX(-27vw) translateY(-14vh) scale(0.76);
  }
}
.firefly:nth-child(10) {
  animation-name: move10;
}
.firefly:nth-child(10)::before {
  animation-duration: 15s;
}
.firefly:nth-child(10)::after {
  animation-duration: 15s, 8188ms;
  animation-delay: 0ms, 4963ms;
}

@keyframes move10 {
  0% {
    transform: translateX(-48vw) translateY(26vh) scale(0.62);
  }
  4.7619047619% {
    transform: translateX(36vw) translateY(-24vh) scale(0.26);
  }
  9.5238095238% {
    transform: translateX(-19vw) translateY(37vh) scale(0.57);
  }
  14.2857142857% {
    transform: translateX(21vw) translateY(11vh) scale(0.93);
  }
  19.0476190476% {
    transform: translateX(38vw) translateY(-16vh) scale(0.31);
  }
  23.8095238095% {
    transform: translateX(-25vw) translateY(-17vh) scale(0.82);
  }
  28.5714285714% {
    transform: translateX(7vw) translateY(-10vh) scale(0.27);
  }
  33.3333333333% {
    transform: translateX(-12vw) translateY(12vh) scale(0.95);
  }
  38.0952380952% {
    transform: translateX(-14vw) translateY(33vh) scale(0.31);
  }
  42.8571428571% {
    transform: translateX(-38vw) translateY(26vh) scale(0.96);
  }
  47.619047619% {
    transform: translateX(-23vw) translateY(28vh) scale(0.78);
  }
  52.380952381% {
    transform: translateX(39vw) translateY(-46vh) scale(0.45);
  }
  57.1428571429% {
    transform: translateX(45vw) translateY(39vh) scale(0.68);
  }
  61.9047619048% {
    transform: translateX(-34vw) translateY(-40vh) scale(0.4);
  }
  66.6666666667% {
    transform: translateX(49vw) translateY(45vh) scale(0.63);
  }
  71.4285714286% {
    transform: translateX(-36vw) translateY(-8vh) scale(0.85);
  }
  76.1904761905% {
    transform: translateX(3vw) translateY(-44vh) scale(0.92);
  }
  80.9523809524% {
    transform: translateX(-1vw) translateY(22vh) scale(0.49);
  }
  85.7142857143% {
    transform: translateX(47vw) translateY(-29vh) scale(0.74);
  }
  90.4761904762% {
    transform: translateX(20vw) translateY(12vh) scale(0.94);
  }
  95.2380952381% {
    transform: translateX(0vw) translateY(-24vh) scale(0.43);
  }
  100% {
    transform: translateX(34vw) translateY(46vh) scale(0.61);
  }
}
.firefly:nth-child(11) {
  animation-name: move11;
}
.firefly:nth-child(11)::before {
  animation-duration: 11s;
}
.firefly:nth-child(11)::after {
  animation-duration: 11s, 9820ms;
  animation-delay: 0ms, 3745ms;
}

@keyframes move11 {
  0% {
    transform: translateX(-3vw) translateY(-22vh) scale(0.8);
  }
  5.8823529412% {
    transform: translateX(-11vw) translateY(34vh) scale(0.66);
  }
  11.7647058824% {
    transform: translateX(-10vw) translateY(-17vh) scale(0.45);
  }
  17.6470588235% {
    transform: translateX(48vw) translateY(-49vh) scale(0.55);
  }
  23.5294117647% {
    transform: translateX(-34vw) translateY(-49vh) scale(0.36);
  }
  29.4117647059% {
    transform: translateX(-18vw) translateY(-15vh) scale(0.48);
  }
  35.2941176471% {
    transform: translateX(9vw) translateY(-8vh) scale(0.36);
  }
  41.1764705882% {
    transform: translateX(42vw) translateY(-38vh) scale(0.93);
  }
  47.0588235294% {
    transform: translateX(45vw) translateY(-28vh) scale(0.71);
  }
  52.9411764706% {
    transform: translateX(44vw) translateY(38vh) scale(0.59);
  }
  58.8235294118% {
    transform: translateX(-19vw) translateY(-15vh) scale(0.61);
  }
  64.7058823529% {
    transform: translateX(-43vw) translateY(-7vh) scale(0.78);
  }
  70.5882352941% {
    transform: translateX(36vw) translateY(-47vh) scale(0.8);
  }
  76.4705882353% {
    transform: translateX(-39vw) translateY(16vh) scale(0.78);
  }
  82.3529411765% {
    transform: translateX(45vw) translateY(-4vh) scale(0.67);
  }
  88.2352941176% {
    transform: translateX(-42vw) translateY(-22vh) scale(0.38);
  }
  94.1176470588% {
    transform: translateX(42vw) translateY(-27vh) scale(0.46);
  }
  100% {
    transform: translateX(9vw) translateY(13vh) scale(0.31);
  }
}
.firefly:nth-child(12) {
  animation-name: move12;
}
.firefly:nth-child(12)::before {
  animation-duration: 17s;
}
.firefly:nth-child(12)::after {
  animation-duration: 17s, 7292ms;
  animation-delay: 0ms, 5281ms;
}

@keyframes move12 {
  0% {
    transform: translateX(-9vw) translateY(38vh) scale(0.37);
  }
  5.8823529412% {
    transform: translateX(-23vw) translateY(39vh) scale(0.57);
  }
  11.7647058824% {
    transform: translateX(-48vw) translateY(-28vh) scale(0.72);
  }
  17.6470588235% {
    transform: translateX(20vw) translateY(9vh) scale(0.67);
  }
  23.5294117647% {
    transform: translateX(38vw) translateY(-24vh) scale(0.68);
  }
  29.4117647059% {
    transform: translateX(18vw) translateY(-41vh) scale(0.36);
  }
  35.2941176471% {
    transform: translateX(8vw) translateY(-35vh) scale(0.48);
  }
  41.1764705882% {
    transform: translateX(8vw) translateY(21vh) scale(0.81);
  }
  47.0588235294% {
    transform: translateX(7vw) translateY(36vh) scale(0.69);
  }
  52.9411764706% {
    transform: translateX(-30vw) translateY(8vh) scale(0.75);
  }
  58.8235294118% {
    transform: translateX(-31vw) translateY(0vh) scale(0.27);
  }
  64.7058823529% {
    transform: translateX(32vw) translateY(23vh) scale(0.73);
  }
  70.5882352941% {
    transform: translateX(50vw) translateY(14vh) scale(0.48);
  }
  76.4705882353% {
    transform: translateX(-48vw) translateY(10vh) scale(0.41);
  }
  82.3529411765% {
    transform: translateX(-36vw) translateY(43vh) scale(0.34);
  }
  88.2352941176% {
    transform: translateX(18vw) translateY(-2vh) scale(0.41);
  }
  94.1176470588% {
    transform: translateX(7vw) translateY(19vh) scale(0.38);
  }
  100% {
    transform: translateX(-46vw) translateY(-46vh) scale(0.91);
  }
}
.firefly:nth-child(13) {
  animation-name: move13;
}
.firefly:nth-child(13)::before {
  animation-duration: 13s;
}
.firefly:nth-child(13)::after {
  animation-duration: 13s, 10699ms;
  animation-delay: 0ms, 6391ms;
}

@keyframes move13 {
  0% {
    transform: translateX(-36vw) translateY(-25vh) scale(0.62);
  }
  5.2631578947% {
    transform: translateX(11vw) translateY(19vh) scale(0.98);
  }
  10.5263157895% {
    transform: translateX(12vw) translateY(47vh) scale(0.85);
  }
  15.7894736842% {
    transform: translateX(7vw) translateY(-4vh) scale(0.28);
  }
  21.0526315789% {
    transform: translateX(-16vw) translateY(-6vh) scale(1);
  }
  26.3157894737% {
    transform: translateX(-4vw) translateY(48vh) scale(0.75);
  }
  31.5789473684% {
    transform: translateX(-2vw) translateY(-31vh) scale(0.42);
  }
  36.8421052632% {
    transform: translateX(-36vw) translateY(13vh) scale(0.65);
  }
  42.1052631579% {
    transform: translateX(-26vw) translateY(-8vh) scale(0.38);
  }
  47.3684210526% {
    transform: translateX(38vw) translateY(-9vh) scale(0.64);
  }
  52.6315789474% {
    transform: translateX(-19vw) translateY(-32vh) scale(0.27);
  }
  57.8947368421% {
    transform: translateX(-42vw) translateY(41vh) scale(0.53);
  }
  63.1578947368% {
    transform: translateX(38vw) translateY(-25vh) scale(0.39);
  }
  68.4210526316% {
    transform: translateX(-8vw) translateY(31vh) scale(0.58);
  }
  73.6842105263% {
    transform: translateX(5vw) translateY(31vh) scale(0.45);
  }
  78.9473684211% {
    transform: translateX(-12vw) translateY(11vh) scale(0.26);
  }
  84.2105263158% {
    transform: translateX(-23vw) translateY(2vh) scale(0.75);
  }
  89.4736842105% {
    transform: translateX(-32vw) translateY(38vh) scale(0.69);
  }
  94.7368421053% {
    transform: translateX(2vw) translateY(49vh) scale(0.54);
  }
  100% {
    transform: translateX(-24vw) translateY(37vh) scale(0.45);
  }
}
.firefly:nth-child(14) {
  animation-name: move14;
}
.firefly:nth-child(14)::before {
  animation-duration: 16s;
}
.firefly:nth-child(14)::after {
  animation-duration: 16s, 7006ms;
  animation-delay: 0ms, 8214ms;
}

@keyframes move14 {
  0% {
    transform: translateX(-44vw) translateY(-5vh) scale(0.56);
  }
  5% {
    transform: translateX(-37vw) translateY(-28vh) scale(0.53);
  }
  10% {
    transform: translateX(-38vw) translateY(-44vh) scale(0.31);
  }
  15% {
    transform: translateX(50vw) translateY(-41vh) scale(0.79);
  }
  20% {
    transform: translateX(-8vw) translateY(26vh) scale(0.78);
  }
  25% {
    transform: translateX(-42vw) translateY(-30vh) scale(0.95);
  }
  30% {
    transform: translateX(1vw) translateY(-22vh) scale(0.65);
  }
  35% {
    transform: translateX(-3vw) translateY(47vh) scale(0.48);
  }
  40% {
    transform: translateX(19vw) translateY(0vh) scale(0.4);
  }
  45% {
    transform: translateX(6vw) translateY(-39vh) scale(0.31);
  }
  50% {
    transform: translateX(45vw) translateY(-1vh) scale(0.84);
  }
  55% {
    transform: translateX(8vw) translateY(-2vh) scale(0.76);
  }
  60% {
    transform: translateX(20vw) translateY(-25vh) scale(0.3);
  }
  65% {
    transform: translateX(-40vw) translateY(-11vh) scale(0.4);
  }
  70% {
    transform: translateX(4vw) translateY(-19vh) scale(0.91);
  }
  75% {
    transform: translateX(-25vw) translateY(-15vh) scale(0.33);
  }
  80% {
    transform: translateX(-9vw) translateY(27vh) scale(0.35);
  }
  85% {
    transform: translateX(-47vw) translateY(-33vh) scale(0.76);
  }
  90% {
    transform: translateX(47vw) translateY(-25vh) scale(0.82);
  }
  95% {
    transform: translateX(-2vw) translateY(23vh) scale(0.33);
  }
  100% {
    transform: translateX(33vw) translateY(45vh) scale(0.61);
  }
}
.firefly:nth-child(15) {
  animation-name: move15;
}
.firefly:nth-child(15)::before {
  animation-duration: 13s;
}
.firefly:nth-child(15)::after {
  animation-duration: 13s, 8035ms;
  animation-delay: 0ms, 3803ms;
}

@keyframes move15 {
  0% {
    transform: translateX(0vw) translateY(-48vh) scale(0.7);
  }
  4.7619047619% {
    transform: translateX(-34vw) translateY(-18vh) scale(0.51);
  }
  9.5238095238% {
    transform: translateX(-36vw) translateY(-43vh) scale(0.91);
  }
  14.2857142857% {
    transform: translateX(3vw) translateY(-20vh) scale(0.32);
  }
  19.0476190476% {
    transform: translateX(-41vw) translateY(47vh) scale(0.98);
  }
  23.8095238095% {
    transform: translateX(31vw) translateY(24vh) scale(0.26);
  }
  28.5714285714% {
    transform: translateX(-49vw) translateY(50vh) scale(0.59);
  }
  33.3333333333% {
    transform: translateX(48vw) translateY(17vh) scale(0.3);
  }
  38.0952380952% {
    transform: translateX(39vw) translateY(-18vh) scale(0.84);
  }
  42.8571428571% {
    transform: translateX(-17vw) translateY(-12vh) scale(0.51);
  }
  47.619047619% {
    transform: translateX(34vw) translateY(31vh) scale(0.77);
  }
  52.380952381% {
    transform: translateX(-39vw) translateY(-24vh) scale(0.73);
  }
  57.1428571429% {
    transform: translateX(-43vw) translateY(45vh) scale(0.95);
  }
  61.9047619048% {
    transform: translateX(25vw) translateY(-8vh) scale(0.72);
  }
  66.6666666667% {
    transform: translateX(3vw) translateY(-30vh) scale(0.95);
  }
  71.4285714286% {
    transform: translateX(-36vw) translateY(-23vh) scale(0.98);
  }
  76.1904761905% {
    transform: translateX(23vw) translateY(-46vh) scale(0.7);
  }
  80.9523809524% {
    transform: translateX(38vw) translateY(32vh) scale(0.92);
  }
  85.7142857143% {
    transform: translateX(-47vw) translateY(-37vh) scale(0.57);
  }
  90.4761904762% {
    transform: translateX(-41vw) translateY(-15vh) scale(0.84);
  }
  95.2380952381% {
    transform: translateX(50vw) translateY(44vh) scale(0.61);
  }
  100% {
    transform: translateX(-15vw) translateY(48vh) scale(0.66);
  }
}
@keyframes drift {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes flash {
  0%, 30%, 100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw yellow;
  }
}

    这里每个萤火虫的移动轨迹都是单独定制的，也可以使用Sass进行复用，效果如下：

20230322160344_45550.png

    和萤火虫特效不同，暗夜流星顾名思义，就是璀璨的流星划过长夜，给人以转瞬即逝的美丽，首先还是设置容器元素：

<div class="star"></div>
<div class="meteor-1"></div>
<div class="meteor-2"></div>
<div class="meteor-3"></div>
<div class="meteor-4"></div>
<div class="meteor-5"></div>
<div class="meteor-6"></div>
<div class="meteor-7"></div>
<div class="meteor-8"></div>
<div class="meteor-9"></div>
<div class="meteor-10"></div>
<div class="meteor-11"></div>
<div class="meteor-12"></div>
<div class="meteor-13"></div>
<div class="meteor-14"></div>
<div class="meteor-15"></div>

    这里除了流星容器，我们还使用stat容器设置繁星满天的效果，和流星特效交相辉映，相得益彰。

    随后设置CSS样式:

.star {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 678px 47px #fff, 1218px 895px #fff, 808px 793px #fff, 1059px 585px #fff, 1657px 258px #fff, 1671px 34px #fff, 758px 990px #fff, 290px 246px #fff, 1783px 218px #fff, 968px 883px #fff, 710px 1px #fff, 1785px 533px #fff, 868px 829px #fff, 224px 672px #fff, 1083px 122px #fff, 1539px 180px #fff, 218px 198px #fff, 1460px 661px #fff, 1480px 103px #fff, 1061px 319px #fff, 1676px 566px #fff, 1563px 130px #fff, 98px 63px #fff, 768px 957px #fff, 143px 693px #fff, 846px 363px #fff, 1372px 200px #fff, 1025px 708px #fff, 193px 160px #fff, 955px 262px #fff, 96px 433px #fff, 1628px 30px #fff, 287px 653px #fff, 441px 241px #fff, 1594px 722px #fff, 1803px 743px #fff, 1235px 85px #fff, 1780px 126px #fff, 801px 832px #fff, 1008px 51px #fff, 1552px 610px #fff, 1264px 756px #fff, 429px 980px #fff, 1058px 775px #fff, 759px 999px #fff, 696px 66px #fff, 630px 879px #fff, 1352px 688px #fff, 270px 262px #fff, 825px 821px #fff, 1670px 750px #fff, 623px 165px #fff, 1605px 987px #fff, 1386px 135px #fff, 1480px 136px #fff, 1115px 987px #fff, 783px 212px #fff, 1715px 255px #fff, 151px 339px #fff, 1653px 184px #fff, 1773px 302px #fff, 103px 604px #fff, 492px 218px #fff, 543px 831px #fff, 1137px 855px #fff, 1637px 553px #fff, 1256px 644px #fff, 789px 596px #fff, 336px 829px #fff, 442px 976px #fff, 1457px 169px #fff, 1535px 642px #fff, 1587px 775px #fff, 1437px 380px #fff, 1907px 759px #fff, 1308px 280px #fff, 752px 747px #fff, 1638px 859px #fff, 1152px 967px #fff, 469px 76px #fff, 1913px 156px #fff, 1357px 316px #fff, 1474px 191px #fff, 1387px 489px #fff, 1541px 890px #fff, 157px 647px #fff, 1288px 546px #fff, 113px 482px #fff, 676px 787px #fff, 1431px 453px #fff, 1656px 664px #fff, 1539px 855px #fff, 647px 714px #fff, 1692px 342px #fff, 303px 534px #fff, 1017px 72px #fff, 1408px 771px #fff, 1837px 517px #fff, 1561px 221px #fff, 655px 554px #fff, 1228px 607px #fff, 886px 262px #fff, 1874px 857px #fff, 1379px 252px #fff, 669px 216px #fff, 886px 803px #fff, 334px 413px #fff, 380px 517px #fff, 1448px 619px #fff, 350px 527px #fff, 327px 520px #fff, 1492px 523px #fff, 1652px 35px #fff, 1792px 921px #fff, 1538px 819px #fff, 1213px 197px #fff, 1554px 220px #fff, 1213px 554px #fff, 1046px 873px #fff, 1727px 702px #fff, 375px 369px #fff, 976px 51px #fff, 982px 448px #fff, 1750px 269px #fff, 52px 756px #fff, 1241px 334px #fff, 132px 886px #fff, 1276px 640px #fff, 1158px 35px #fff, 45px 613px #fff, 1608px 707px #fff, 744px 982px #fff, 1555px 274px #fff, 1681px 795px #fff, 660px 614px #fff, 1764px 191px #fff, 1627px 685px #fff, 1094px 542px #fff, 1762px 750px #fff, 129px 694px #fff, 579px 19px #fff, 514px 896px #fff, 967px 785px #fff, 368px 547px #fff, 262px 355px #fff, 1180px 643px #fff, 757px 416px #fff, 389px 821px #fff, 289px 731px #fff, 555px 699px #fff, 551px 934px #fff, 572px 895px #fff, 1721px 1000px #fff, 1141px 262px #fff, 552px 298px #fff, 481px 862px #fff, 614px 446px #fff, 81px 147px #fff, 1429px 595px #fff, 1389px 16px #fff, 45px 767px #fff, 801px 265px #fff, 675px 876px #fff, 1032px 139px #fff, 605px 676px #fff, 1768px 346px #fff, 494px 717px #fff, 131px 207px #fff, 818px 779px #fff, 509px 258px #fff, 551px 320px #fff, 954px 224px #fff, 902px 719px #fff, 694px 715px #fff, 1785px 205px #fff, 1168px 122px #fff, 1476px 59px #fff, 351px 303px #fff, 416px 373px #fff, 646px 94px #fff, 267px 101px #fff, 1126px 21px #fff, 313px 1px #fff, 1348px 48px #fff, 363px 652px #fff, 1333px 329px #fff, 77px 664px #fff, 1778px 628px #fff, 1423px 338px #fff, 923px 327px #fff, 601px 61px #fff, 795px 652px #fff, 150px 469px #fff, 1560px 464px #fff, 1519px 794px #fff, 458px 955px #fff, 465px 994px #fff, 458px 334px #fff, 162px 779px #fff, 1296px 266px #fff, 1775px 454px #fff, 1387px 923px #fff, 1709px 337px #fff, 281px 667px #fff, 1414px 322px #fff, 1458px 237px #fff, 257px 39px #fff, 1380px 763px #fff, 777px 93px #fff, 1895px 522px #fff, 1482px 622px #fff, 1508px 434px #fff, 1096px 909px #fff, 217px 979px #fff, 119px 492px #fff, 480px 93px #fff, 105px 889px #fff, 1194px 156px #fff, 1611px 936px #fff, 130px 105px #fff, 1664px 583px #fff, 1825px 219px #fff, 911px 618px #fff, 436px 914px #fff, 1904px 794px #fff, 1897px 860px #fff, 746px 337px #fff, 1139px 318px #fff, 1882px 950px #fff, 1022px 858px #fff, 259px 704px #fff, 1550px 509px #fff, 842px 930px #fff, 401px 888px #fff, 1357px 353px #fff, 942px 733px #fff, 667px 881px #fff, 400px 317px #fff, 998px 290px #fff, 1860px 305px #fff, 1270px 46px #fff, 1421px 522px #fff, 813px 560px #fff, 348px 592px #fff, 1732px 30px #fff, 715px 479px #fff, 503px 408px #fff, 280px 652px #fff, 1037px 343px #fff, 824px 936px #fff, 34px 888px #fff, 1317px 759px #fff, 195px 80px #fff, 738px 270px #fff, 750px 516px #fff, 1486px 11px #fff, 1897px 619px #fff, 1661px 213px #fff, 353px 867px #fff, 718px 372px #fff, 320px 558px #fff, 1144px 500px #fff, 46px 519px #fff, 1839px 572px #fff, 1572px 551px #fff, 1538px 262px #fff, 625px 704px #fff, 1742px 794px #fff, 1279px 401px #fff, 1711px 865px #fff, 1082px 486px #fff, 691px 934px #fff, 447px 764px #fff, 536px 466px #fff, 1163px 40px #fff, 1820px 454px #fff, 710px 52px #fff, 707px 772px #fff, 585px 914px #fff, 1051px 71px #fff, 232px 415px #fff, 1382px 841px #fff, 478px 25px #fff, 495px 304px #fff, 323px 569px #fff, 1907px 224px #fff, 56px 997px #fff, 1653px 143px #fff, 22px 313px #fff, 613px 25px #fff, 1706px 190px #fff, 373px 719px #fff, 1744px 317px #fff, 622px 866px #fff, 799px 903px #fff, 461px 77px #fff, 282px 4px #fff, 1703px 688px #fff, 1542px 555px #fff, 1384px 38px #fff;
}

.meteor-1 {
  position: absolute;
  top: 221px;
  left: 19%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 6.7s linear infinite;
}
.meteor-1:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-2 {
  position: absolute;
  top: 125px;
  left: 90%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 5.4s linear infinite;
}
.meteor-2:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-3 {
  position: absolute;
  top: 83px;
  left: 39%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 5s linear infinite;
}
.meteor-3:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-4 {
  position: absolute;
  top: 222px;
  left: 93%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 5.1s linear infinite;
}
.meteor-4:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-5 {
  position: absolute;
  top: 284px;
  left: 27%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 6.1s linear infinite;
}
.meteor-5:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-6 {
  position: absolute;
  top: 146px;
  left: 74%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 5.5s linear infinite;
}
.meteor-6:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-7 {
  position: absolute;
  top: 185px;
  left: 32%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 7s linear infinite;
}
.meteor-7:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-8 {
  position: absolute;
  top: 223px;
  left: 24%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 3.7s linear infinite;
}
.meteor-8:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-9 {
  position: absolute;
  top: 272px;
  left: 39%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 3.8s linear infinite;
}
.meteor-9:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-10 {
  position: absolute;
  top: 201px;
  left: 33%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 5.2s linear infinite;
}
.meteor-10:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-11 {
  position: absolute;
  top: 241px;
  left: 67%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 4s linear infinite;
}
.meteor-11:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-12 {
  position: absolute;
  top: 290px;
  left: 86%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 8.7s linear infinite;
}
.meteor-12:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-13 {
  position: absolute;
  top: 77px;
  left: 30%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 6.1s linear infinite;
}
.meteor-13:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-14 {
  position: absolute;
  top: 81px;
  left: 22%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 9.6s linear infinite;
}
.meteor-14:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-15 {
  position: absolute;
  top: 189px;
  left: 82%;
  width: 300px;
  height: 1px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  animation: meteor 9.7s linear infinite;
}
.meteor-15:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

@keyframes meteor {
  0% {
    opacity: 1;
    margin-top: -300px;
    margin-right: -300px;
  }
  12% {
    opacity: 0;
  }
  15% {
    margin-top: 300px;
    margin-left: -600px;
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

    这里stat容器通过上文的box-shadow属性设置发光点，随后15颗流星容器通过meteor方法效果划过夜空：

20230322210308_70478.png

    身前是万家灯火，身后是繁星闪烁，绝了。

    白天不懂夜的黑，夜色朦胧最迷离，黑夜给了我们黑色的眼睛，我们却用它来寻找发光的特效，暗夜发光，独自闪耀，摄人魂魄，心驰神往，别有一番风味。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK