HTML+CSS 霓虹灯效果

效果图

  <h2 contenteditable="true"></h2>

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

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background: -webkit-linear-gradient(top left, #07252d, rgb(162, 173, 110));
    }

    h2 {
      position: relative;
      font-size: 6em;
      letter-spacing: 15px;
      color: #0e3742;
      text-transform: uppercase;
      text-align: center;
      -webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
      line-height: 0.7em;
      outline: none;
      animation: animate 5s linear infinite;
    }

    @keyframes animate {

      0%,
      18%,
      20%,
      50.1%,
      60%,
      65.1%,
      80%,
      90.1%,
      92% {
        color: rgb(155, 30, 50);
      }

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

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