HTML&CSS :下雪了

这段代码创建了一个动态的雪花飘落加载动画,通过 CSS 技术实现了雪花的下落和消失效果,为页面添加了视觉吸引力和动态感。


大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能解决问题,私信我,我会发送完整的压缩包给你

演示效果

HTML&CSS

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注:前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: #212121;
        }

        .loader {
            position: relative;
            width: 110px;
            height: 30px;
            background: #fff;
            border-radius: 100px;
        }

        .loader::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 10px;
            width: 30px;
            height: 30px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 40px 0 0 20px #fff;
        }

        .snow {
            position: relative;
            display: flex;
            z-index: 1;
        }

        .snow span {
            position: relative;
            width: 3px;
            height: 3px;
            background: #fff;
            margin: 0 2px;
            border-radius: 50%;
            animation: snowing 5s linear infinite;
            animation-duration: calc(15s / var(--i));
            transform-origin: bottom;
        }

        @keyframes snowing {
            0% {
                transform: translateY(0px);
            }

            70% {
                transform: translateY(100px) scale(1);
            }

            100% {
                transform: translateY(100px) scale(0);
            }
        }
    </style>
</head>

<body>
    <div class="loader">
        <div class="snow">
            <span style="--i:11"></span>
            <span style="--i:12"></span>
            <span style="--i:15"></span>
            <span style="--i:17"></span>
            <span style="--i:18"></span>
            <span style="--i:13"></span>
            <span style="--i:14"></span>
            <span style="--i:19"></span>
            <span style="--i:20"></span>
            <span style="--i:10"></span>
            <span style="--i:18"></span>
            <span style="--i:13"></span>
            <span style="--i:14"></span>
            <span style="--i:19"></span>
            <span style="--i:20"></span>
            <span style="--i:10"></span>
            <span style="--i:18"></span>
            <span style="--i:13"></span>
            <span style="--i:14"></span>
            <span style="--i:19"></span>
            <span style="--i:20"></span>
            <span style="--i:10"></span>
        </div>
    </div>
</body>

</html>

HTML 结构

  • loader: 创建一个类名为"loader"的 div 元素,用于包含加载动画的各个部分。
  • snow: 创建一个类名为"snow"的 div 元素,用于包含所有雪花。
  • 每个 span 代表一个雪花,通过 style="--i:n"设置不同的动画持续时间。

CSS 样式

  • body: 设置页面的边距、填充、高度、显示方式和对齐方式,背景色为深灰色。
  • .loader: 设置加载动画的容器样式,包括位置、尺寸、背景色和圆角。
  • .loader::before: 设置一个圆形的伪元素,用于创建雪花飘落的起点,通过 box-shadow 创建多个雪花。
  • .snow: 设置雪花容器的样式,包括位置和显示方式。
  • .snow span: 设置每个雪花的样式,包括位置、尺寸、背景色、边距、圆角和动画效果。
  • animation: snowing 5s linear infinite: 应用雪花飘落的动画,持续时间为 15s / var(--i),使每个雪花的下落速度不同。
  • transform-origin: bottom: 设置雪花的变换原点为底部,使雪花从底部开始下落。@keyframes snowing: 定义雪花飘落的动画效果。0%: 雪花在初始位置。70%: 雪花下落 100 像素,并保持原始大小。100%: 雪花下落 100 像素,并逐渐消失(通过 scale(0))。
相关推荐
我有一棵树几秒前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
white-persist16 分钟前
JWT 漏洞全解析:从原理到实战
前端·网络·python·安全·web安全·网络安全·系统安全
果粒chenl37 分钟前
React学习(四) --- Redux
javascript·学习·react.js
IT_陈寒1 小时前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start1 小时前
前端基础一、HTML5
前端·html·html5
Never_Satisfied1 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER1 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css