轉(zhuǎn)載請(qǐng)注明出處，點(diǎn)擊此處 查看更多精彩內(nèi)容

預(yù)覽效果

查看 Turbo 官網(wǎng) 時(shí)發(fā)現(xiàn)它的背景動(dòng)畫(huà)挺有意思，就自己動(dòng)手實(shí)現(xiàn)了一下。下面對(duì)關(guān)鍵點(diǎn)進(jìn)行解釋說(shuō)明，查看完整代碼及預(yù)覽效果請(qǐng) 點(diǎn)擊這里。

簡(jiǎn)單說(shuō)明原理：使用 mask-image 遮罩繪制網(wǎng)格，使用 perspective 及 rotate 動(dòng)畫(huà)設(shè)置 3D 縱深效果，并添加位移動(dòng)畫(huà)即可。

DOM 結(jié)構(gòu)

<div class="container">
  <div class="lines"></div>
</div>

• .container 容器用來(lái)做 3D 變換。
• .lines 用來(lái)繪制網(wǎng)格線(xiàn)并執(zhí)行動(dòng)畫(huà)。

繪制網(wǎng)格線(xiàn)

.lines {
  ...,
  background-image: linear-gradient(90deg, var(--left-line-color) 45%, transparent 50%, var(--right-line-color) 55%);
  -webkit-mask-image: linear-gradient(90deg, #000 2px, transparent 0), linear-gradient(180deg, #000 2px, transparent 0);
  mask-image: linear-gradient(90deg, #000 2px, transparent 0), linear-gradient(180deg, #000 2px, transparent 0);
  -webkit-mask-size: var(--grid-size) var(--grid-size);
  mask-size: var(--grid-size) var(--grid-size);
}

• background-image 繪制一個(gè)從左向右漸變的背景。
• mask-image 繪制水平和垂直的線(xiàn)條做遮罩。
• mask-size 設(shè)置單個(gè)遮罩的尺寸，即網(wǎng)格尺寸。

3D 變換

配置 3D 變換使網(wǎng)格擁有從遠(yuǎn)處延伸到近前的效果。

.container {
  ...,
  perspective: 1000px;
}

.lines {
  transform: rotateX(75deg);
}

添加動(dòng)畫(huà)

@keyframes move {
  from {
    transform: rotateX(75deg) translateY(0);
  }

  to {
    transform: rotateX(75deg) translateY(var(--grid-size));
  }
}

.lines {
  transform: rotateX(75deg) translateY(0);
  animation: move 1s linear infinite;
}

設(shè)置動(dòng)畫(huà) Y 軸移動(dòng)一個(gè)網(wǎng)格的長(zhǎng)度，并無(wú)限循環(huán)。

其他

設(shè)置頂部和底部遮罩，遮擋住頂部雜亂的線(xiàn)條，并使底部擁有淡出的效果。

.container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,  var(--bg-color) 50%, transparent);
  z-index: 1;
}

.container::after {
  content: "";
  position: absolute;
  inset: calc(100% - var(--grid-size)) 0 0;
  height: var(--grid-size);
  background: linear-gradient(180deg, transparent, var(--bg-color));
  z-index: 1;
}