CSS特效-下雨天效果

HTML

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

CSS

  body {
    font-family: "Arial", "Microsoft YaHei", "黑体", sans-serif;
    margin: 0;
    padding: 0;
  }

  #rain {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 50px;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(#333, #999, #1f4794, #1f4735);
  }

  .h1 {
    position: relative;
    color: #333;
    font-size: 2em;
    letter-spacing: 2rem;
    -webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
    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;
  }


  .raindrop {
    display: inline-block;
    position: absolute;
    top: 0;
    width: 5px;
    height: 5px;
    background: radial-gradient(#8fd4fc, #52b1f2, #0599fc);
    border-radius: 5000px;
    transform: rotateY(45deg);
    animation: raindrop .8s;
  }

  .ripple {
    display: inline-block;
    position: absolute;
    border: 2px solid #8fd4fc;
    border-radius: 5000px;
    background: rgba(0, 0, 0, 0);
    transform: rotateX(72deg);
    animation: ripple .6s;
  }

  @keyframes raindrop {
    0% {
      top: 5%;
    }

    10% {
      top: 10%;
    }

    20% {
      top: 20%;
    }

    30% {
      top: 30%;
    }

    40% {
      top: 40%;
    }

    50% {
      top: 50%;
    }

    60% {
      top: 60%;
    }

    70% {
      top: 70%;
    }

    80% {
      top: 80%;
    }

    90% {
      top: 90%;
    }

    100% {
      top: 95%;
    }
  }

  @keyframes ripple {
    0% {
      width: 2px;
      height: 2px;
    }

    10% {
      width: 4px;
      height: 4px;
    }

    20% {
      width: 6px;
      height: 6px;
    }

    30% {
      width: 8px;
      height: 8px;
    }

    40% {
      width: 10px;
      height: 10px;
    }

    50% {
      width: 12px;
      height: 12px;
    }

    60% {
      width: 14px;
      height: 14px;
    }

    70% {
      width: 16px;
      height: 16px;
    }

    80% {
      width: 18px;
      height: 18px;
    }

    90% {
      width: 20px;
      height: 20px;
    }

    100% {
      width: 22px;
      height: 22px;
    }
  }

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

JS

 window.onload = function onload() {
      let rain = document.getElementById('rain');
      let = clientWidth = document.body.clientWidth;
      let = clientHeight = document.body.clientHeight;
      function dorpRain() {
        setTimeout(() => {
          if (typeof clientWidth !== 'undefined' && null !== clientWidth) {
            let el = document.createElement('div');
            el.setAttribute('class', 'raindrop');
            el.style.left = parseInt(Math.random() * clientWidth, 10) + 'px';
            rain.appendChild(el);
            setTimeout(() => {
              rain.removeChild(el);
            }, parseInt(400 + Math.random() * 350, 10))
          }

          dorpRain();
        }, parseInt(10 + Math.random() * 10, 10))
      }

      function ripple() {
        setTimeout(() => {
          if (typeof clientWidth !== 'undefined' && null !== clientWidth && typeof clientHeight !== 'undefined' && null !== clientHeight) {
            let el = document.createElement('div');
            el.setAttribute('class', 'ripple');
            el.style.left = parseInt(Math.random() * clientWidth, 10) + 'px';
            el.style.top = parseInt(clientHeight / 100 * 50 + (Math.random() * (clientHeight / 100 * 50)), 10) + 'px';
            rain.appendChild(el);
            setTimeout(() => {
              rain.removeChild(el);
            }, 600)
          }

          ripple();
        }, parseInt(10 + Math.random() * 10, 10))
      }

      dorpRain();
      ripple();
    }

    function debounce(fn, wait, context) {
      let timer = null;
      return function () {
        timer ? clearTimeout(timer) : '';
        timer = setTimeout(() => {
          fn.apply(context, arguments);
        }, wait)
      }
    }

    function onresize(event) {
      clientWidth = document.body.clientWidth;
      clientHeight = document.body.clientHeight;
    }

    window.addEventListener("resize", debounce(onresize, 200, null));
    Timer()
    setInterval(Timer, 1000)
    function Timer() {
      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';
      }
    }