純CSS實現跑馬燈效果，CSS動畫知識是該補一補了

作者：林三心不學挖掘機 2023-11-01 08:33:45

開發前端

最近看一個網站的時候，發現一個效果類似于廣告燈的感覺，挺不錯的，于是就想用純CSS來實現這個效果，順便提升一下自己的CSS動畫技能

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。

最近看一個網站的時候，發現一個效果類似于廣告燈的感覺，挺不錯的，于是就想用純CSS來實現這個效果，順便提升一下自己的CSS動畫技能。

圖片

分析

我們先分析怎么做的，這個效果分成兩個部分：

上層：真正動畫的層級
下層：充當一個底色

然后他們通過絕對定位疊在一起。

圖片

可以看到，動畫沒開始前，頁面是這樣的，可以理解這是一個底色下層，鋪在下面，讓每一個圓都有一個輪廓。

圖片

動畫上層開始的時候，下層是不變的，一直保持底色。

圖片

開始寫頁面

頁面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-color: #232b36;
    }

    .container {
      position: relative;
    }

    .grid {
      display: flex;
      flex-wrap: wrap;
      width: 240px;
    }

    .high {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
    }

    .low {
      opacity: .1;
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
    }

    span {
      width: 4px;
      height: 4px;
      margin: 10px;
      border-radius: 50%;
      background-color: #fff;
      opacity: .6;
      display: block;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="grid high">
       30個span。。
    </div>
    <div class="grid low">
       30個span。。
    </div>
  </div>
</body>

</html>

現在能看到已經把兩層疊在了一起。

圖片

動畫

接下來讓 high 這一層開始動畫

.high span {
      /* 動畫名 */
      animation-name: myAnimation;
      /* 動畫時長 */
      animation-duration: 1s;
      /* 無限循環 */
      animation-iteration-count: infinite;
      background-color: #AEF731;
    }
    @keyframes myAnimation {
      0% {
        transform: scale(0);
        opacity: 0;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

現在就有動畫效果了

圖片

但是我們可以看到剛剛我們想要的效果，他是中間先變，四周再變的

圖片

所以我們需要使用到動畫延遲，也就是

animation-delay這個樣式屬性

.delay-1 {
      animation-delay: 0.1s;
    }
    .delay-2 {
      animation-delay: 0.2s;
    }
    .delay-3 {
      animation-delay: 0.3s;
    }
    .delay-4 {
      animation-delay: 0.4s;
    }

<div class="grid high">
      <span class="delay-4"></span>
      <span class="delay-3"></span>
      <span class="delay-2"></span>
      <span class="delay-1"></span>
      <span></span>
      <span></span>
      <span class="delay-1"></span>
      <span class="delay-2"></span>
      <span class="delay-3"></span>
      <span class="delay-4"></span>
      <span class="delay-4"></span>
      <span class="delay-3"></span>
      <span class="delay-2"></span>
      <span class="delay-1"></span>
      <span></span>
      <span></span>
      <span class="delay-1"></span>
      <span class="delay-2"></span>
      <span class="delay-3"></span>
      <span class="delay-4"></span>
      <span class="delay-4"></span>
      <span class="delay-2"></span>
      <span class="delay-2"></span>
      <span class="delay-1"></span>
      <span></span>
      <span></span>
      <span class="delay-1"></span>
      <span class="delay-2"></span>
      <span class="delay-3"></span>
      <span class="delay-4"></span>
    </div>

這就達到了我們想要的效果啦~~~

圖片

代碼總覽

圖片

責任編輯：武曉燕來源：前端之神

CSS 動畫效果