HTML+CSS完成聚光灯效果

最新推荐文章于 2024-12-08 12:49:22 发布

转载最新推荐文章于 2024-12-08 12:49:22 发布 · 579 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.bilibili.com/video/BV1Wv411k7Hx

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

效果如下
在这里插入图片描述

代码如下

<!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>