【HTML】落雪特效

ckblt · 发表于 2022-1-24 21:48:53

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 ckblt 于 2022-1-25 19:38 编辑

我做了个落雪特效，分享给大家。
Github:加速的github链接或者默认的github链接

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Snow</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        max-width: 100vw;
        max-height: 100vh;
        overflow: hidden;
        background-color: #4b495a;
      }

      .snow {
        position: absolute;
        width: var(--size);
        height: var(--size);
        top: var(--top);
        left: var(--left);
        border-radius: 50%;
        opacity: 0.7;
        background-color: #bfc8d6;
        filter: blur(calc(var(--size) / 5));
      }
      #text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        min-height: 100vh;
        color: #9ca2ac;
      }
      #text h1 {
        font-size: 200px;
        filter: blur(5px);
      }
      #text p {
        font-size: 30px;
        filter: blur(1.5px);
      }
    </style>
  </head>
  <body>
    <div id="text">
      <h1>SNOW</h1>
      <p>Simple snow effect.</p>
    </div>

    <script>
      function random(x, y) {
        return Math.random() * (x - y) + y;
      }
      setInterval(() => {
        const snow = document.createElement('div');
        let t = 0;
        let speed = random(3, 5);
        let l = random(0, window.innerWidth + 100);
        snow.style.setProperty('--size', `${random(5, 20)}px`);
        snow.style.setProperty('--top', `${t}px`);
        snow.style.setProperty('--left', `${l}px`);
        snow.classList.add('snow');
        setInterval(() => {
          if (t > window.innerHeight || l < 0) {
            snow.remove();
          }
          snow.style.setProperty('--top', `${t}px`);
          snow.style.setProperty('--left', `${l}px`);
          l += -0.5;
          t += speed;
        }, 1000 / 60);
        document.body.append(snow);
      }, 1000 / 30);
    </script>
  </body>
</html>

Passepartout · 发表于 2022-1-25 08:49:11

seniorz · 发表于 2022-2-16 11:02:42

运行起来效果是相当浪漫！

shiyouroc · 发表于 2022-2-17 10:08:50

厉害了呀，大佬。666

hornwong · 发表于 2022-2-18 10:07:47

账号		自动登录	找回密码
密码			立即注册

[作品展示] 【HTML】落雪特效

马上注册，结交更多好友，享用更多功能^_^