CSS特效-聚光灯效果

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

  html {
      font-size: 15px;
    }

    body {
      padding: 0;
      margin: 0;
      background-color: #222;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .h1 {
      position: relative;
      color: #333;
      font-family: Helvetica;
      padding: 0;
      margin: 0;
      font-size: 8rem;
      letter-spacing: -0.3rem;

    }

    .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%);
      animation: feSpotLight 5s infinite;
      background: url(https://img2.baidu.com/it/u=2729922125,4245306553&fm=26&fmt=auto&gp=0.jpg)center center;
      -webkit-background-clip: text;
      background-clip: text;
    }

    @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%);
      }
    }

 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';
    }