眾所周知，網(wǎng)頁的暗黑模式可以減少屏幕反射和藍(lán)光輻射，減少眼睛的疲勞感，特別是在夜間使用時更為明顯。其實(shí)暗黑模式也給霓虹燈效應(yīng)（Neon Effect）提供了發(fā)揮的環(huán)境。

霓虹燈效應(yīng)是一種視覺效果，其特點(diǎn)是在深色背景上使用鮮艷的顏色來產(chǎn)生強(qiáng)烈的視覺沖擊。這種效應(yīng)通常用于設(shè)計(jì)海報(bào)、廣告、標(biāo)志和網(wǎng)頁等。霓虹燈效應(yīng)的作用在于吸引人們的注意力和增強(qiáng)品牌形象的辨識度，因?yàn)檫@種效果讓人印象深刻且易于記憶，本次我們盤點(diǎn)適合暗色模式的網(wǎng)頁特效，還是喜歡，暗夜的你。

發(fā)光特效

暗黑模式下最炫酷的效果無外乎發(fā)光，基本上頁面元素的發(fā)光需要依賴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) */
}

這里使用多個陰影值來創(chuàng)建分層效果。您可以用逗號分隔多個陰影值，它們將疊加在彼此上面。

但是這種效果比較單調(diào)，box-shadow屬性只會保持所在的元素的形狀上發(fā)光，如果我們想讓一個元素的發(fā)光效果比較有層次感，那么就需要border-radius屬性的配合。

我們可以通過給出多組值（用逗號分隔）來在一個元素上堆疊多個發(fā)光效果。發(fā)光效果將首先堆疊在頂部，最后一個堆疊在底部：

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 */
}

說白了就是漸進(jìn)的光暈效果，最內(nèi)層往最內(nèi)層逐漸減淡：

配合動畫特效，比如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;

}

隨后結(jié)合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;
}

我們就可以營造出這種“冷燈看劍，劍上幾番功名”的特效：

對于SVG圖片來說，不建議使用box-shadow，因?yàn)闆]法應(yīng)用到path實(shí)體，這里建議使用filter屬性：

.shadow_filter{

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

}

這里通過第三個參數(shù)25px來控制發(fā)光的亮度，第四個參數(shù)可以改變顏色，暗色發(fā)光與亮色不發(fā)光的對比：

發(fā)光體與動畫結(jié)合

除了靜態(tài)的發(fā)光體，我們也可以讓發(fā)光體“動”起來，首先建立發(fā)光體容器：

<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方法來動態(tài)改變?nèi)萜鞯奈恢煤皖伾Ч缦拢?/span>

螢火蟲特效

在移動發(fā)光體的基礎(chǔ)上，我們可以繼續(xù)精進(jìn)，打造螢火蟲的效果，首先創(chuàng)建元素容器：

<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;
}

隨后編寫移動動畫，讓螢火蟲進(jìn)行不規(guī)則運(yùn)動：

@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;
  }
}

這里每個螢火蟲的移動軌跡都是單獨(dú)定制的，也可以使用Sass進(jìn)行復(fù)用，效果如下：

暗夜流星

和螢火蟲特效不同，暗夜流星顧名思義，就是璀璨的流星劃過長夜，給人以轉(zhuǎn)瞬即逝的美麗，首先還是設(shè)置容器元素：

<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容器設(shè)置繁星滿天的效果，和流星特效交相輝映，相得益彰。

隨后設(shè)置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屬性設(shè)置發(fā)光點(diǎn)，隨后15顆流星容器通過meteor方法效果劃過夜空：

身前是萬家燈火，身后是繁星閃爍，絕了。

結(jié)語

白天不懂夜的黑，夜色朦朧最迷離，黑夜給了我們黑色的眼睛，我們卻用它來尋找發(fā)光的特效，暗夜發(fā)光，獨(dú)自閃耀，攝人魂魄，心馳神往，別有一番風(fēng)味。

（報(bào)告出品方/作者：長江證券）

一、Flash 是較易實(shí)現(xiàn)的車載全固態(tài)激光雷達(dá)方案

激光雷達(dá)固態(tài)升級是主旋律

MEMS 半固態(tài)激光雷達(dá)是目前最為成熟的半固態(tài)激光雷達(dá)，也是當(dāng)下乘用車前裝量產(chǎn) 的首選方案。MEMS 微振鏡本質(zhì)上是一種硅基半導(dǎo)體元器件，其特點(diǎn)是內(nèi)部集成了“可 動”的微型鏡面，采用靜電或電磁驅(qū)動方式，將以電機(jī)為主的掃描系統(tǒng)換成 MEMS驅(qū)動的鏡片，實(shí)現(xiàn)激光雷達(dá)的掃描。MEMS 作為較為成熟的半導(dǎo)體元件具備大規(guī)模生產(chǎn) 后成本下降的特性，但下降空間有限。

MEMS 依舊存在少量機(jī)械結(jié)構(gòu)。MEMS 的核心部件 MEMS 微振鏡屬于震動敏感型結(jié) 構(gòu)，如何確保其在車載極端環(huán)境下的可靠性是 MEMS 廠商需要解決的問題之一。此外， 精密的微振結(jié)構(gòu)在生產(chǎn)過程中調(diào)試難度較大，依舊存在部分手工調(diào)節(jié)過程，難以滿足大 批量、標(biāo)準(zhǔn)化、低成本、快速生產(chǎn)的需求。

MEMS 性能提升潛力較低。MEMS 方案通過 MEMS 振鏡的物理震動來實(shí)現(xiàn)光束的反射 和折射，以完成對光束的操控。因此，光束掃描頻率與 MEMS 振鏡的振動頻率直接相 關(guān)。但 MEMS 振鏡的震動存在物理極限，進(jìn)而導(dǎo)致了 MEMS 激光雷達(dá)的掃描頻率提升受限。而全固態(tài)方案則不依賴機(jī)械運(yùn)動，主要與脈沖頻率有關(guān)，因此成像頻率在理論上 可無限提升。

MEMS 掃描模式下，掃描頻率與掃描角度存在沖突。MEMS 振鏡振動頻率越快，則掃 描頻率越快。而 MEMS 振動幅度越大，則掃描角度越大。振動頻率與振動幅度負(fù)相關(guān)， 因此掃描頻率與掃描角度之間存在沖突。MEMS 振鏡震動頻率越快，則光束掃描越快， 掃描頻率越高，幀率越高，但掃描角度越小。

Flash 激光雷達(dá)不存在機(jī)械掃描過程，其幀率與脈沖頻率有關(guān)。Flash 激光雷達(dá)的成像 原理與攝像機(jī)類似，其在短時間內(nèi)向前方發(fā)射大面積的激光，依靠高靈敏度的探測器對 回波信號進(jìn)行收集并繪制成像。Flash 激光單點(diǎn)面積比掃描型激光單點(diǎn)大，因此其功率 密度較低，進(jìn)而影響到 Flash 激光雷達(dá)的探測精度和探測距離。

Flash 激光雷達(dá)當(dāng)前功率密度較低，性能較差

Flash 激光雷達(dá)功率密度較低，F(xiàn)oV（掃描角度）、探測距離、探測精度三者難以兼顧。 Flash 方案激光雷達(dá)屬于泛光成像，其發(fā)射的光線會散布在整個視場內(nèi)，其中包括大量 不必要的區(qū)域，因此會對功率造成浪費(fèi)，從而影響其探測精度和距離。因此，其探測的 FoV 角度越大，便意味著等量的功率所需覆蓋的面積越大，則激光功率密度越低，探測 距離越短，探測精度越低。

Flash 方案的弊病主要可從四個方面解決：提高功率、縮小掃描角度以聚焦、可變掃描 角設(shè)計(jì)、降低定位。提高功率是提高 Flash 激光雷達(dá)性能最直接的方案，但是實(shí)現(xiàn)難度 最大；縮小掃描角度以聚焦、可變掃描角兩種方案屬于在探測距離和掃描角度之間做取 舍，實(shí)現(xiàn)難度較低；降低定位方案的發(fā)展思路為放棄提升性能而專注于降本。

“提高功率”方案實(shí)現(xiàn)難度最大，可能會導(dǎo)致成本大幅上升。傳統(tǒng)的 VCSEL 激光器存 在發(fā)光密度功率低的缺陷，導(dǎo)致只在近距離探測領(lǐng)域有相應(yīng)的激光雷達(dá)產(chǎn)品（通常<50m）。近年來國內(nèi)外多家 VCSEL 激光器公司紛紛開發(fā)了多層結(jié) VCSEL 激光器，將其發(fā) 光功率密度提升了 5~10 倍，這為應(yīng)用 VCSEL 開發(fā)長距激光雷達(dá)提供了可能。

“縮小掃描角度以聚焦”、“可變掃描角”屬于在探測距離和掃描角度之間做取舍的兩種 方案，其實(shí)現(xiàn)難度較低。在嚴(yán)格控制生產(chǎn)成本情況下，兼顧掃描角度、探測距離二者的 全能激光雷達(dá)研發(fā)生產(chǎn)難度較高，專注于某一方面性能的功能性激光雷達(dá)有望成為主流。 縮小掃描角度以提高在較小掃描范圍內(nèi)的探測距離，屬于主雷達(dá)發(fā)展思路；而可變掃描 角方案則實(shí)現(xiàn)了性能側(cè)重點(diǎn)在探測距離和掃描角度之間轉(zhuǎn)換的靈活性，屬于平衡型雷達(dá) 發(fā)展思路。

主激光雷達(dá)特點(diǎn)為探測距離遠(yuǎn)，平衡型激光雷特點(diǎn)為無明顯弱勢項(xiàng)。主雷達(dá)通常安裝在 車輛中央，面朝前方，對探測距離有較高要求，對掃描角度無硬性要求。其通常搭配若 干中短距雷達(dá)在車輛周身作為輔助，以彌補(bǔ)其在掃描角度上的不足，代表型產(chǎn)品為 Ouster-ES2。平衡型激光雷達(dá)在探測距離、掃描角度等方面無明顯弱勢項(xiàng)，通常以雷達(dá) 組的形式出現(xiàn)，覆蓋車輛周身主要視角和方向，代表型產(chǎn)品為速騰聚創(chuàng) M1。

“降低定位”方案的發(fā)展思路為放棄提升性能而專注于降本。輔助雷達(dá)對于性能要求較 低，但對成本更加敏感。Flash 方案激光雷達(dá)相比于機(jī)械式和 MEMS 的優(yōu)勢在于集成 度、量產(chǎn)成本，而劣勢在于短期內(nèi)性能難以大幅提高，其方案本身特點(diǎn)較為滿足輔助雷 達(dá)定位。

二、Ouster：逆浪而行的數(shù)字激光雷達(dá)

堅(jiān)持芯片化集成技術(shù)，產(chǎn)品矩陣完善

Ouster 成立于 2015 年，于 2021 年 3 月通過 SPAC 在北美上市（代碼：OUST）。公司 旗下激光雷達(dá)產(chǎn)品主要分為機(jī)械式的 OS 和固態(tài)式的 ES 兩大系列。根據(jù)公司官網(wǎng)信息， 公司產(chǎn)品命名采用字母+數(shù)字的形式：OS 為機(jī)械式激光雷達(dá)，ES 為固態(tài)激光雷達(dá)；0、 1、2 分別對應(yīng)短、中、長距。在 OS 系列三款不同定位產(chǎn)品中，又劃分為 32 線、64 線、 128 線三種規(guī)格。截至 2021 年 8 月，Ouster 官網(wǎng)合計(jì)列示了 9 款機(jī)械旋轉(zhuǎn)式激光雷達(dá) 和 1 款固態(tài)激光雷達(dá)。

ES2 固態(tài)激光雷達(dá)犧牲掃描角度以實(shí)現(xiàn)更遠(yuǎn)的探測距離。前文提到，F(xiàn)lash 方案激光雷 達(dá)存在功率密度低的弊病，可通過調(diào)整掃描角度或探測距離的方法將有限的功率側(cè)重供 給于某方面性能上。Ouster ES2 固態(tài)雷達(dá)選擇犧牲掃描角度以換取較遠(yuǎn)探測距離，其 掃描角度僅為 26°* 13°，但探測距離高達(dá) 200m（10%反射率），應(yīng)用領(lǐng)域?yàn)?ADAS。

Ouster 產(chǎn)品矩陣較為完善，下游應(yīng)用場景多樣。公司第一代產(chǎn)品為 OS1，開創(chuàng)性的將 固態(tài)的激光收發(fā)器與機(jī)械旋轉(zhuǎn)掃描結(jié)構(gòu)相結(jié)合，定位為中距探測。Ouster 第二代產(chǎn)品為 超廣角激光雷達(dá) OS0 和遠(yuǎn)距離激光雷達(dá) OS2。相比于第一代產(chǎn)品 OS1，OS0 在探測距 離方面更短，但垂直掃描角度翻倍，整體 FOV 角度達(dá)到了 360°x 90°的超高水平；而 OS2 的掃描角度僅為 OS1 的一半，但其探測距離相比于 OS1 則提升了一倍，主要用于 遠(yuǎn)距離探測。目前 Ouster OS 系列產(chǎn)品均已實(shí)現(xiàn)量產(chǎn)，使用場景覆蓋自動駕駛、無人機(jī)、 安防等多個領(lǐng)域。

Ouster 與眾不同的三大特質(zhì)

芯片化、850nm 附近工作波長、數(shù)字化是 Ouster 產(chǎn)品的三大特征。Ouster 專注于數(shù) 字化技術(shù)，將激光雷達(dá)的收發(fā)端全部集成到芯片上，使得整個產(chǎn)品的集成度大幅提升， 成本和量產(chǎn)難度大幅降低。此外，在激光波長選擇方面，Ouster 憑借自身在環(huán)境光抑制 方面的專利技術(shù)，采用了光子通量較高的 850nm 附近波長的激光，從而使得自身產(chǎn)品 具備了諸多的特質(zhì)。而在掃描結(jié)構(gòu)方面，其在 OS 系列產(chǎn)品上延續(xù)了傳統(tǒng)機(jī)械旋轉(zhuǎn)式的 掃描結(jié)構(gòu)，形成了獨(dú)有的機(jī)械式固態(tài)方案。

Ouster 專注于芯片集成技術(shù)，研發(fā)共享度高，可有效降低成本。不同于傳統(tǒng)激光雷達(dá) 內(nèi)部包含了數(shù)千個零部件，Ouster 數(shù)字激光雷達(dá)內(nèi)部只有一個芯片級激光陣列和一個 CMOS 傳感器，大大降低了價格，提高了性能和可靠性。其不同系列產(chǎn)品均采用芯片化 的激光發(fā)射器和探測器，區(qū)別僅體現(xiàn)在光束操控領(lǐng)域，因此研發(fā)成果共享度極高，可有 效降低研發(fā)成本。此外，芯片集成技術(shù)可使得 Ouster 激光雷達(dá)產(chǎn)品的性能提升遵循摩 爾定律，使其性能提升速度遠(yuǎn)超同類競品。

環(huán)境光抑制技術(shù)賦予 Ouster 具備使用 850nm 作為工作波長的能力。850nm 波長處的 太陽光子通量遠(yuǎn)高于傳統(tǒng)激光雷達(dá)使用的 905nm、940nm、1550nm，會在探測器接收 回波信號過程中造成較大噪音干擾。Ouster 擁有獨(dú)特的環(huán)境光抑制技術(shù)，即使考慮到太 陽光譜中不同波長的光子通量差異，其探測器仍能夠保持較高信噪比。

選擇 850nm 作為工作波長為 Ouster 產(chǎn)品帶來諸多優(yōu)勢：低水汽吸收性、高 CMOS 探 測器靈敏度。大氣中的水蒸氣會吸收部分 905nm、940nm、1550nm 太陽光，因此地表 中上述三種波長光的含量較低，但地表的潮濕環(huán)境中的水汽仍然會對上述波長的光進(jìn)行 吸收，進(jìn)而使得采用上述三種工作波長的激光雷達(dá)能量利用率下降。而 850nm 光在所 有條件下都擁有較低的水汽吸收性，因此Ouster激光在潮濕環(huán)境中的受到的影響較低。

硅基 CMOS 探測器在 850nm 處擁有更高靈敏度。從 850nm 到 905nm，硅基探測器感 知上述波長的靈敏度降低了約 2 倍。探測器靈敏度下降會直接導(dǎo)致其可接收到的回波信 號減少，降低激光雷達(dá)的探測距離和分辨率。

Ouster 將機(jī)械式旋轉(zhuǎn)掃描結(jié)構(gòu)融入固態(tài)激光雷達(dá)之中，形成了獨(dú)特的數(shù)字激光雷達(dá)。 Ouster 巧妙的結(jié)合了機(jī)械旋轉(zhuǎn)式激光雷達(dá) 360°掃描和固態(tài)激光雷達(dá)在成本和集成度 方面的優(yōu)勢，開創(chuàng)了全新的數(shù)字激光雷達(dá)路線。

應(yīng)用領(lǐng)域廣泛，業(yè)績爆發(fā)在即

Ouster 的合作伙伴涉及諸多應(yīng)用領(lǐng)域，單一合作伙伴合作程度較深，對車載依賴程度 較低。根據(jù) Ouster 公布信息，公司產(chǎn)品目前應(yīng)用在諸多領(lǐng)域，包括自動駕駛、機(jī)器人、 安防、工業(yè)、智慧城市、V2X、農(nóng)業(yè)、地圖等，其中自動駕駛、機(jī)器人、安防三大領(lǐng)域 合作伙伴數(shù)量最多。根據(jù) Ouster 官網(wǎng)列示信息，截至 2021 年 7 月，該三大應(yīng)用領(lǐng)域合 作伙伴數(shù)量分別為 12 個、11 個、10 個。Ouster 與單一合作伙伴在諸多領(lǐng)域均有合作 項(xiàng)目，合作程度較深。

根據(jù) Ouster 官網(wǎng)列示信息，截至 2021 年 7 月，與 Ouster 合作 領(lǐng)域最多的四大合作伙伴為 Unikie、CronAI、Mechaspin、4D Virtualiz，合作領(lǐng)域數(shù)量 分別為 6 個、5 個、4 個、4 個。需要特別指出的是，Ouster 雖然在車載市場的合作伙 伴數(shù)量最多，但公司對車載市場的依賴程度并不深。根據(jù) Ouster 的預(yù)測，2020-2025 年，自動駕駛對公司營業(yè)收入的貢獻(xiàn)約為 15%，ADAS 營收貢獻(xiàn)約為 2%。

Ouster 的諸多合作伙伴有望為公司在 2025 年帶來近 60 億美元訂單。根據(jù) Ouster 推 介材料公布信息，截至 2021 年 5 月 6 日，公司現(xiàn)有客戶有望為公司在 2025 年帶來價 值超過 20 億美元的訂單，而全部客戶為公司在 2025 年帶來的訂單價值量有望達(dá)到近 60 億美元。

公司傳感器有望在 2020 年后快速降本，穩(wěn)步提升毛利率，并在 2023 年后快速放量。 公司目前主推 9 款機(jī)械式激光雷達(dá)和 1 款車載固態(tài)激光雷達(dá)，2020 年產(chǎn)品平均售價及 平均成本分別高達(dá) 7818 美元和 8119 美元，總毛利率僅為 8%，公司產(chǎn)品有望快速降 本，在 2025 年將產(chǎn)品平均售價及平均成本分別下降至 1703 美元和 809 美元，總毛利 率提升至 59%。Ouster 預(yù)計(jì)其傳感器銷量有望在 2023 年之后實(shí)現(xiàn)快速放量，2020- 2025 年化復(fù)合增長率高達(dá) 218%。產(chǎn)品銷量快速提升的原因是公司固態(tài)激光雷達(dá)產(chǎn)品 有望在 2023 年大量投放市場。

營業(yè)收入和毛利潤快速增長，毛利率逐年提升。根據(jù) Ouster 官方信息，公司營業(yè)收入 及毛利潤在 2020-2025 年有望實(shí)現(xiàn)大幅增長，營業(yè)收入 2020-2025 年化復(fù)合增長率高 達(dá) 142%，毛利潤 2020-2025 年化復(fù)合增長率高達(dá) 242%。公司產(chǎn)品量產(chǎn)帶來的規(guī)模效 應(yīng)將持續(xù)降低產(chǎn)品生產(chǎn)成本，提高公司產(chǎn)品在市場上的競爭力，并賦予公司更強(qiáng)的議價 能力和提價空間，持續(xù)提升毛利率。

三、Ibeo：多領(lǐng)域布局，均衡型發(fā)展路線

專注車載和工業(yè)領(lǐng)域

Ibeo 成立于 1998 年，初始專注于激光掃描儀技術(shù)的緊急制動系統(tǒng)開發(fā)。2000 年，工 業(yè)應(yīng)用傳感器和傳感器系統(tǒng)制造商 SICK AG 收購 Ibeo 90%的股份成為大股東，同年發(fā) 布無任何移動部件的 ALASCA 激光掃描儀。2005 年，公司 ALASCAXT 的探測范圍從 80 米擴(kuò)展到 200 米，并成為 Ibeo 第一個帶有 FPGA 的傳感器。2007 年，公司發(fā)布 Ibeo LUX。2020 年，Ibeo 成為長城汽車再中國的首家激光雷達(dá)系列供應(yīng)商。同年，公司產(chǎn) 品 Ibeo NEXT Generic 樣本進(jìn)入市場，預(yù)計(jì)將在 2022 年實(shí)現(xiàn)量產(chǎn)。

Ibeo 選擇可變掃描角方案，面向均衡型雷達(dá)方向發(fā)展。Ibeo 目前在車載領(lǐng)域主要有兩 款產(chǎn)品。第一款為 2007 年發(fā)布的 LUX，其探測距離較近，在車載領(lǐng)域難以獨(dú)立擔(dān)當(dāng)主 雷達(dá)的角色，主要作為工業(yè)級激光雷達(dá)和車載輔助激光雷達(dá)。第二款為車規(guī)級激光雷達(dá) NEXT Generic，該款激光雷達(dá)將激光發(fā)射器（10240 個 VCSEL）、激勵源（25Hz）、信 號探測器（10240 線 SPAD）集成為三顆 ASIC 芯片，有 11.2°*5.6°和 60°*30°兩 種掃描角模式。Ibeo NEXT 傳感器包含 128 列 80 行激光發(fā)射器和信號探測器。該款產(chǎn) 品使用連續(xù)閃爍技術(shù)，可逐行對環(huán)境進(jìn)行掃描。

獨(dú)特 4D 激光雷達(dá)，強(qiáng)化車載性能

Ibeo NEXT Generic 4D 激光雷達(dá)擁有多種掃描角模式，使用場景多樣。Ibeo 開發(fā)了業(yè) 界全新的 4D 傳感器系統(tǒng)，可額外形成黑白圖像——強(qiáng)度數(shù)據(jù)，強(qiáng)度圖像將強(qiáng)化車道識 別功能。Ibeo NEXT 的應(yīng)用場景十分多樣，根據(jù)應(yīng)用，可以選擇 11.2°x 5.6°或 60° x 30°兩種掃描角（目前正在開發(fā) 32°和 120°模式）。通過使用多個傳感器并將數(shù)據(jù) 與運(yùn)行在 ECU 上的軟件融合，可以對車輛周圍環(huán)境進(jìn)行 360°檢測。Ibeo NEXT Generic 可用于從交通擁堵助手到自動駕駛的汽車應(yīng)用，其在工業(yè)領(lǐng)域也有許多用途。

Ibeo 與長城汽車等多家企業(yè)建立合作關(guān)系。根據(jù) Ibeo 官網(wǎng)公布信息，截至 2021 年 8 月，公司公布的合作伙伴主要有長城汽車、Sick Sensor Intelligence、ZF、AMS、四維 圖新、亮道等企業(yè)，涉及領(lǐng)域包括工業(yè)應(yīng)用、汽車電子、光學(xué)傳感器、自動駕駛、乘用 車等。公司于 2020 年與長城汽車簽訂激光雷達(dá)系列生產(chǎn)合同，成為長城汽車全球首家 激光雷達(dá)供應(yīng)商。長城汽車旗下高端 WEY SUV 未來的量產(chǎn)車型將采用 Ibeo 的技術(shù)和 產(chǎn)品，預(yù)計(jì)激光雷達(dá)量產(chǎn)時間為 2022 年，由亮道智能負(fù)責(zé)全套激光雷達(dá)系統(tǒng)的測試和 驗(yàn)證。

Ibeo 車載應(yīng)用更加多樣，Ouster 車載主雷達(dá)優(yōu)勢更明顯。通過對比 Ibeo 和 Ouster 兩 家 Flash 方案廠商車載固態(tài)激光雷達(dá)的性能，我們認(rèn)為兩者雖都可用于車載領(lǐng)域，但在 定位上存在差異。Ouster 選擇犧牲掃描視場角換取探測距離，定位為車載主雷達(dá)。而 Ibeo 則有多種視場角模式可供選擇，可在主雷達(dá)、輔助雷達(dá)兩種角色間靈活切換，應(yīng)用更加多樣，使用更加靈活。

（本文僅供參考，不代表我們的任何投資建議。如需使用相關(guān)信息，請參閱報(bào)告原文。）

精選報(bào)告來源：【未來智庫官網(wǎng)】。

「鏈接」