设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 【HTML】落雪特效
返回列表 发新帖
查看: 2296|回复: 4

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

[复制链接]
ckblt
发表于 2022-1-24 21:48:53 | 显示全部楼层 |阅读模式

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

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

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

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

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

  9.     <style>
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.       }

  15.       body {
  16.         max-width: 100vw;
  17.         max-height: 100vh;
  18.         overflow: hidden;
  19.         background-color: #4b495a;
  20.       }

  22.       .snow {
  23.         position: absolute;
  24.         width: var(--size);
  25.         height: var(--size);
  26.         top: var(--top);
  27.         left: var(--left);
  28.         border-radius: 50%;
  29.         opacity: 0.7;
  30.         background-color: #bfc8d6;
  31.         filter: blur(calc(var(--size) / 5));
  32.       }
  33.       #text {
  34.         display: flex;
  35.         justify-content: center;
  36.         align-items: center;
  37.         flex-direction: column;
  38.         min-height: 100vh;
  39.         color: #9ca2ac;
  40.       }
  41.       #text h1 {
  42.         font-size: 200px;
  43.         filter: blur(5px);
  44.       }
  45.       #text p {
  46.         font-size: 30px;
  47.         filter: blur(1.5px);
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <div id="text">
  53.       <h1>SNOW</h1>
  54.       <p>Simple snow effect.</p>
  55.     </div>

  57.     <script>
  58.       function random(x, y) {
  59.         return Math.random() * (x - y) + y;
  60.       }
  61.       setInterval(() => {
  62.         const snow = document.createElement('div');
  63.         let t = 0;
  64.         let speed = random(3, 5);
  65.         let l = random(0, window.innerWidth + 100);
  66.         snow.style.setProperty('--size', `${random(5, 20)}px`);
  67.         snow.style.setProperty('--top', `${t}px`);
  68.         snow.style.setProperty('--left', `${l}px`);
  69.         snow.classList.add('snow');
  70.         setInterval(() => {
  71.           if (t > window.innerHeight || l < 0) {
  72.             snow.remove();
  73.           }
  74.           snow.style.setProperty('--top', `${t}px`);
  75.           snow.style.setProperty('--left', `${l}px`);
  76.           l += -0.5;
  77.           t += speed;
  78.         }, 1000 / 60);
  79.         document.body.append(snow);
  80.       }, 1000 / 30);
  81.     </script>
  82.   </body>
  83. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

Passepartout
发表于 2022-1-25 08:49:11 | 显示全部楼层
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

seniorz
发表于 2022-2-16 11:02:42 | 显示全部楼层
运行起来效果是相当浪漫！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

shiyouroc
发表于 2022-2-17 10:08:50 From FishC Mobile | 显示全部楼层
厉害了呀，大佬。666
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

hornwong
发表于 2022-2-18 10:07:47 | 显示全部楼层
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-2 00:12

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表