当前位置： 首页 > news >正文

HTMLCSS ：下雪了

news 2026/2/7 11:59:17

这段代码创建了一个动态的雪花飘落加载动画，通过 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)）。

相关文章：

HTMLCSS ：下雪了

这段代码创建了一个动态的雪花飘落加载动画&#xff0c;通过 CSS 技术实现了雪花的下落和消失效果&#xff0c;为页面添加了视觉吸引力和动态感。 大家复制代码时&#xff0c;可能会因格式转换出现错乱&#xff0c;导致样式失效。建议先少量复制代码进行测试&#xff0c;若未能…...

编程日记 2025/2/4 19:35:33

如何处理 Typecho Joe 主题被抄袭或盗版的问题

在开源社区中&#xff0c;版权保护是一个非常重要的话题。如果你发现自己的主题&#xff08;如 Joe 主题&#xff09;被其他主题&#xff08;如子比主题&#xff09;抄袭或盗版&#xff0c;你可以采取以下措施来维护自己的权益。 一、确认侵权行为 在采取任何行动之前&#xf…...

编程日记 2025/2/4 19:34:32

利用Vue和javascript分别编写一个“Hello World”的定时更新

目录 一、利用Vue编写一个“Hello World”的定时更新&#xff08;1&#xff09;vue编码在Html文件中&#xff08;2&#xff09;vue编码在js文件中 二、利用javascript编写一个“Hello World”的定时更新 一、利用Vue编写一个“Hello World”的定时更新 &#xff08;1&#xff…...

编程日记 2025/2/4 19:32:29

volatile变量需要减少读取次数吗

问题说明 本人在前期读Netty源码时看到这样一段源码和注释&#xff1a; private boolean invokeHandler() {// Store in local variable to reduce volatile reads.int handlerState this.handlerState;return handlerState ADD_COMPLETE || (!ordered && handlerS…...

编程日记 2025/2/4 19:24:21

bootstrap.yml文件未自动加载问题解决方案

在添加bootstrap.yml文件后,程序未自动扫描到,即图标是这样的: 查了一些资料,是缺少bootstrap相关依赖,虽然已经添加了spring-cloud-context依赖,但是这个依赖并未引入bootstrap依赖,可能是版本问题,需要手动引入 <dependency><groupId>org.springframework.cloud&…...

编程日记 2025/2/4 19:22:14

编程AI深度实战：AI编程工具哪个好? Copilot vs Cursor vs Cody vs Supermaven vs Aider

​ 系列文章： 编程AI深度实战：私有模型deep seek r1，必会ollama-CSDN博客 编程AI深度实战：自己的AI，必会LangChain-CSDN博客 编程AI深度实战：给vim装上AI-CSDN博客 编程AI深度实战：火的编程AI，都在用语法树（AST）-CSDN博客 编程AI深度实战：让verilog不再是 AI …...

编程日记 2025/2/4 19:20:11

前端知识速记--CSS篇：display

前端知识速记–CSS篇&#xff1a;display 一、什么是 display 属性&#xff1f; display 属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式&#xff0c;还对元素的布局、结构以及与其他元素之间的关系产生重要影响。 二、常用 display 属性值 1. block …...

编程日记 2025/2/4 19:19:10

51单片机 01 LED

一、点亮一个LED 在STC-ISP中单片机型号选择 STC89C52RC/LE52RC&#xff1b;如果没有找到hex文件&#xff08;在objects文件夹下&#xff09;&#xff0c;在keil中options for target-output- 勾选 create hex file。 如果要修改编程 &#xff1a;重新编译-下载/编程-单片机重…...

编程日记 2025/2/4 19:18:05

WPF进阶 | WPF 动画特效揭秘：实现炫酷的界面交互效果

WPF进阶 | WPF 动画特效揭秘&#xff1a;实现炫酷的界面交互效果 前言一、WPF 动画基础概念1.1 什么是 WPF 动画1.2 动画的基本类型1.3 动画的核心元素 二、线性动画详解2.1 DoubleAnimation 的使用2.2 ColorAnimation 实现颜色渐变 三、关键帧动画深入3.1 DoubleAnimationUsin…...

编程日记 2025/2/4 19:08:54

分页按钮功能

前言 在前端开发中&#xff0c;分页功能是一个常见的需求&#xff0c;特别是当需要展示大量数据时&#xff0c;它能有效提升用户体验。该文章结合运用了HTML&#xff0c;CSS&#xff0c;JS实现网页的分页按钮功能&#xff0c;并且可以选择每页显示的条数试试更新总页数及显示当…...

编程日记 2025/2/4 19:07:53

数据分析系列--⑦RapidMiner模型评价(基于泰坦尼克号案例含数据集)

一、前提 二、模型评估 1.改造⑥ 2.Cross Validation算子说明 2.1Cross Validation 的作用 2.1.1 模型评估 2.1.2 减少过拟合 2.1.3 数据利用 2.2 Cross Validation 的工作原理 2.2.1 数据分割 2.2.2 迭代训练与测试 ​​​​​​​ 2.2.3 结果汇总 ​​​​​​​ …...

编程日记 2025/2/4 19:06:52

集合通讯概览

集合通信概览 &#xff08;1&#xff09;通信的算法 是根据通讯的链路组成的 &#xff08;2&#xff09;因为通信链路 跟硬件强相关&#xff0c;所以每个CCL的库都不一样 芯片与芯片、不同U之间是怎么通信的 多卡训练&#xff1a;多维并行&#xff08;xxx并行在上一期已经讲述…...

编程日记 2025/2/4 18:56:41

【FreeRTOS 教程 八】直达任务通知

目录 一、FreeRTOS 直达任务通知&#xff1a; &#xff08;1&#xff09;直达任务通知基本介绍&#xff1a; &#xff08;2&#xff09;更新目标通知的值&#xff1a; &#xff08;3&#xff09;性能优势和使用限制&#xff1a; 二、直达任务通知 API&#xff1a; &#…...

编程日记 2025/2/4 18:52:35

Ubuntu 18.04安装Emacs 26.2问题解决

个人博客地址&#xff1a;Ubuntu 18.04安装Emacs 26.2问题解决 | 一张假钞的真实世界 no X development libraries were found checking for X... no checking for X... true configure: error: You seem to be running X, but no X development libraries were found. You …...

编程日记 2025/2/4 18:45:23

nodejs：js-mdict 的下载、安装、测试、build

js-mdict 项目的目录结构&#xff1a;js-mdict 项目教程 js-mdict 下载地址: js-mdict-master.zip 先解压到 D:\Source\ js-mdict 6.0.2 用了 ts (TypeScript) 和 Jest&#xff0c;增加了应用开发的难度&#xff0c;因为先要了解 ts 和 Jest。 参阅&#xff1a;测试与开发&a…...

编程日记 2025/2/4 18:38:13

CSS关系选择器详解

CSS关系选择器详解 学习前提什么是关系选择器&#xff1f;后代选择器&#xff08;Descendant Combinator&#xff09;语法示例注意事项 子代选择器&#xff08;Child Combinator&#xff09;语法示例注意事项 邻接兄弟选择器&#xff08;Adjacent Sibling Combinator&#xff0…...

编程日记 2025/2/4 18:29:00

Python在线编辑器

from flask import Flask, render_template, request, jsonify import sys from io import StringIO import contextlib import subprocess import importlib import threading import time import ast import reapp Flask(__name__)RESTRICTED_PACKAGES {tkinter: 抱歉&…...

编程日记 2025/2/4 18:27:55

蓝桥杯备考：高精度算法之除法

我们除法的高精度其实也不完全是高精度&#xff0c;而是一个高精度作被除数除以一个低精度 模拟我们的小学除法 由于题目中我们的除数最大是1e9&#xff0c;当它真正是1e9的时候&#xff0c;t是有可能超过1e9的&#xff0c;所以要用long long...

编程日记 2025/2/4 18:26:52

笔试-业务逻辑4

应用 小明在玩一个数字加减游戏&#xff0c;输入4个正整数&#xff1a;s、t、a、b&#xff0c;其中s>1&#xff0c;b<105&#xff0c;a!b。只使用加法或者减法&#xff0c;使得st。 每回合&#xff0c;小明用当前的数字&#xff0c;加上或减去一个数字&#xff1b;目前有…...

编程日记 2025/2/4 18:18:41

《Linux服务与安全管理》| 数据库服务器安装和配置

《Linux服务与安全管理》| 数据库服务器安装和配置 目录 《Linux服务与安全管理》| 数据库服务器安装和配置 任务一&#xff1a; 安装PostgreSQL数据库&#xff0c;设置远程登录&#xff0c;客户端可以成功登录并操作数据库。 任务二&#xff1a; 安装MySQL数据库&#xf…...

编程日记 2025/2/4 18:14:37

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2026/2/5 4:25:15

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2026/2/7 10:59:19

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2026/2/4 11:21:40

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2026/1/26 14:15:48

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/12/22 12:09:15

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2026/2/6 6:02:51