HTML+CSS完成聚光燈效果

zyzs發表於2020-12-11
HTMLCSS

效果如下
在這裡插入圖片描述

程式碼如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>聚光燈效果</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #222;
      }
      h1 {
        position: relative;
        /* 文字轉大寫 */
        text-transform: uppercase;
        color: #333;
        /* 1rem = 16px */
        font-size: 8rem;
      }
      h1::after {
        content: 'spotlight';
        position: absolute;
        left: 0;
        right: 0;
        /* color: yellowgreen; */
        color: transparent;
        background-image: linear-gradient(
          to right,
          #c23616,
          #192a56,
          #00d2d3,
          yellow,
          #6d214f,
          #2e86de,
          #4cd137,
          #e84118
        );
        /* 背景繪製區域 當值為text的時候 代表設定了文字的背景顏色 
         但前提是文字的顏色是透明色 */
        background-clip: text;
        /* 谷歌瀏覽器的私有屬性 */
        -webkit-background-clip: text;
        /* 利用裁切來建立元素的可現實區域 circle表示建立了圓形
        100px表示圓形的直徑 0%和50%表示圓形的圓心 圓形的直徑和
        圓形的圓心利用at關鍵字隔開
         */
        clip-path: circle(100px at 0% 50%);
        /* 動畫    名稱 時長 無限次播放*/
        animation: move 5s infinite;
      }
      /* 下面設定圓形的移動效果 */
      @keyframes move {
        0% {
          clip-path: circle(100px at 0% 50%);
        }
        50% {
          clip-path: circle(100px at 100% 50%);
        }
        100% {
          clip-path: circle(100px at 0% 50%);
        }
      }
    </style>
  </head>
  <body>
    <h1>spotlight</h1>
  </body>
</html>

相關文章