HTMLCSS ：下雪了

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

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

演示效果

在这里插入图片描述

HTML&CSS

<!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)）。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/69879.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！