前端 單標籤 純 CSS 實現紅綠燈動畫

使用一個div標籤畫出一個紅綠燈並加上燈光切換的動畫。 關鍵思想在於一個標籤的box-shadow屬性能夠同時設置多個。

效果以下：

代碼：

html：
{
 <!--warp標籤是後面的藍色背景-->
  <div class="wrap">
    <div class="traffic-light"></div>
  </div>
}

css:
    body {
      margin: 0;
      /* 絕對定位使height: 100%生效 */
      position: absolute; 
      height: 100%;
      width: 100%;
    }
    /* 背景圖 使用margin auto實現垂直水平居中 */
    .wrap {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 500px;
      height: 350px;
      background: rgb(97, 170, 189);
    }
    /* 燈框架 */
    .traffic-light {
      /* 居中代碼 */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      text-align: center;

      /* 繪製圖案 */
      width: 300px;
      height: 90px;
      background: #282f2f;
      border-radius: 50px;
      box-shadow: 0 0 0 2px #eee inset;
    }
    .traffic-light::after {
      /* 居中代碼 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      content: '';
      display: inline-block;
      width: 70px;
      height: 70px;
      border-radius: 50%;

      animation: traffic-light 5s linear 0s infinite;
    }
    
    @keyframes traffic-light {
      from {
        background: transparent;  /* 黃燈 */

        box-shadow: 
          -85px 0 0 0 transparent,  /* 紅燈 */
          85px 0 0 0 transparent, /* 綠燈 */
          -85px 0 15px 0 transparent, /* 紅燈光影 */
          0px 0 15px 0 transparent, /* 黃燈光影 */
          85px 0 15px 0 transparent; /* 綠燈光影 */
      }
      25% {
        background: transparent;  /* 黃燈 */

        box-shadow: 
          -85px 0 0 0 rgb(247, 78, 26),  /* 紅燈 */
          85px 0 0 0 transparent, /* 綠燈 */
          -85px 0 15px 0 rgb(247, 78, 26), /* 紅燈光影 */
          0px 0 15px 0 transparent, /* 黃燈光影 */
          85px 0 15px 0 transparent; /* 綠燈光影 */
      }
      50% {
        background: rgb(231, 183, 78);  /* 黃燈 */

        box-shadow: 
          -85px 0 0 0 transparent,  /* 紅燈 */
          85px 0 0 0 transparent, /* 綠燈 */
          -85px 0 15px 0 transparent, /* 紅燈光影 */
          0px 0 15px 0 rgb(231, 183, 78), /* 黃燈光影 */
          85px 0 15px 0 transparent; /* 綠燈光影 */
      }
      75% {
        background: transparent;  /* 黃燈 */

        box-shadow: 
          -85px 0 0 0 transparent,  /* 紅燈 */
          85px 0 0 0 rgb(38, 175, 84), /* 綠燈 */
          -85px 0 15px 0 transparent, /* 紅燈光影 */
          0px 0 15px 0 transparent, /* 黃燈光影 */
          85px 0 15px 0 rgb(38, 175, 84); /* 綠燈光影 */
      }
      to {
        background: transparent;  /* 黃燈 */

        box-shadow: 
          -85px 0 0 0 transparent,  /* 紅燈 */
          85px 0 0 0 transparent, /* 綠燈 */
          -85px 0 15px 0 transparent, /* 紅燈光影 */
          0px 0 15px 0 transparent, /* 黃燈光影 */
          85px 0 15px 0 transparent; /* 綠燈光影 */
      }
    }
複製代碼

完整代碼地址：github.com/junhaogz215…