CSS特效-霓虹聚光灯效果

最新推荐文章于 2023-06-11 10:42:24 发布

臧小川

最新推荐文章于 2023-06-11 10:42:24 发布

阅读量150

点赞数

分类专栏： CSS 文章标签： css

臧小川

本文链接：https://blog.csdn.net/chuan0106/article/details/120252201

版权

CSS 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

在这里插入图片描述

  <h1 class="h1" data-spotlight="Hello World">Hello World</h1>

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Helvetica;
    }

    html {
      font-size: 15px;
    }

    body {
      background: linear-gradient(to right, #bb313e25, #bb313e25, #d7222925, #dd4a1625, #e4761525, #f5c50025, #f0e92725, #b1ce2425, #48a93525, #03944525, #157c4f25, #176a5825, #1b556325, #1d386f25, #1d386f25, #20277825, #52266325, #8a244b25);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .h1 {
      position: relative;
      color: #333;
      padding: 0;
      margin: 0;
      font-size: 8rem;
      letter-spacing: -0.3rem;
      -webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
      text-transform: uppercase;
      line-height: 0.7;
    }

    .h1::after {
      content: attr(data-spotlight);
      position: absolute;
      left: 0;
      top: 0;
      color: transparent;
      -webkit-clip-path: ellipse(100px 100px at 0% 50%);
      clip-path: ellipse(100px 100px at 0% 50%);
      -webkit-background-clip: text;
      background-clip: text;
      animation: feSpotLight 5s infinite;
    }


    @keyframes feSpotLight {
      0% {
        -webkit-clip-path: ellipse(100px 100px at 0% 50%);
        clip-path: ellipse(100px 100px at 0% 50%);
      }

      50% {
        -webkit-clip-path: ellipse(100px 100px at 50% 50%);
        clip-path: ellipse(100px 100px at 100% 50%);
      }

      100% {
        -webkit-clip-path: ellipse(100px 100px at 50% 50%);
        clip-path: ellipse(100px 100px at 0% 50%);
      }

      0%,
      18%,
      20%,
      50.1%,
      60%,
      65.1%,
      80%,
      90.1%,
      92% {
        color: rgb(40, 131, 216);
      }

      15%,
      23%,
      48%,
      58%,
      75%,
      82%,
      96% {
        color: rgb(212, 47, 47);
      }

      18.1%,
      20.1%,
      50.1%,
      60%,
      65.1%,
      80%,
      90.1%,
      100% {
        color: rgb(203, 219, 60);
        text-shadow: 0 0 0 10px #03bcf4;
      }
    }

 let h1 = document.querySelector('h1')
    h1.attributes[1].value;

    var date = new Date();
    var h = date.getHours();
    if (h < 10) {
      h1.innerHTML = '上班打卡';
      h1.attributes[1].value = '上班打卡';
    }
    else if (h < 12) {
      h1.innerHTML = '上班中~';
      h1.attributes[1].value = '上班中';
    }
    else if (h < 14) {
      h1.innerHTML = '吃饭睡觉打豆豆';
      h1.attributes[1].value = '吃饭睡觉打豆豆';
    } else if (h < 18) {
      h1.innerHTML = '持续上班中~';
      h1.attributes[1].value = '持续上班中';
    } else if (h < 20) {
      h1.innerHTML = '要下班了 记得打卡';
      h1.attributes[1].value = '要下班了 记得打卡';
    }
    else {
      h1.innerHTML = 'HELLO WORLD';
      h1.attributes[1].value = 'HELLO WORLD';
    }