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

HTMLCSS ：下雪了

news 2026/3/29 11:11:39

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

解锁Dify工作流新潜能：四种并行模式实战解析

1. 为什么需要工作流并行化&#xff1f; 第一次用Dify构建工作流时&#xff0c;我就被它的可视化编排能力惊艳到了。但实际跑了几次发现&#xff0c;当处理复杂任务时&#xff0c;串行执行就像在高速公路上开拖拉机——明明有八车道却只开放一条。比如做新闻情感分析时&#xf…...

编程新知 2026/3/29 9:24:03

百度网盘提取码智能获取工具：3秒解锁任何分享资源的终极方案

百度网盘提取码智能获取工具&#xff1a;3秒解锁任何分享资源的终极方案 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否曾遇到过这样的场景&#xff1f;好不容易找到一个急需的学习资源&#xff0c;点击百度网盘链接后…...

编程新知 2026/3/29 8:09:40

3分钟免费制作AI视频：零基础也能成为数字导演

3分钟免费制作AI视频&#xff1a;零基础也能成为数字导演 【免费下载链接】auto-video-generateor 自动视频生成器&#xff0c;给定主题&#xff0c;自动生成解说视频。用户输入主题文字&#xff0c;系统调用大语言模型生成故事或解说的文字&#xff0c;然后进一步调用语音合成…...

编程新知 2026/3/29 7:09:22

基于DWS构建RAG框架生成行业调研报告

1. 前言 适用版本&#xff1a;【DWS 9.1.1.200&#xff08;及以上&#xff09;】 在信息爆炸的时代&#xff0c;行业调研报告的生成正面临数据规模庞大、信息碎片化、人工处理效率低等多重挑战。检索增强生成&#xff08;RAG, Retrieval-Augmented Generation&#xff09;作为…...

编程新知 2026/3/29 6:42:49

VRRP配置里这个‘坑’你踩过吗？详解track监视上行链路与流量黑洞问题

VRRP高可用架构中的隐形陷阱&#xff1a;深度解析上行链路监控与流量黑洞解决方案 当企业核心网络的网关设备突然"失联"&#xff0c;但设备状态灯却依然闪烁着健康的绿色&#xff0c;这种看似矛盾的故障场景往往让运维团队陷入困境。上周深夜&#xff0c;某金融公司就…...

编程新知 2026/3/29 4:33:19

Linux命令-mkswap（设置交换分区或交换文件）

mkswap 命令用于在 Linux 系统中设置交换分区或交换文件&#xff0c;将其格式化为交换空间&#xff08;swap space&#xff09;。交换空间是磁盘上的一块区域&#xff0c;当物理内存不足时&#xff0c;系统会将不常用的内存页交换到这里。 &#x1f4d6; 基本语法 mkswap [选项…...

编程新知 2026/3/29 2:21:56

终极高DPI解决方案：Apple Cursor如何重新定义跨平台指针体验

终极高DPI解决方案&#xff1a;Apple Cursor如何重新定义跨平台指针体验 【免费下载链接】apple_cursor Free & Open source macOS Cursors. 项目地址: https://gitcode.com/gh_mirrors/ap/apple_cursor 在当今高分辨率显示设备普及的时代&#xff0c;用户面临着一个…...

编程新知 2026/3/29 1:53:44

2023款惠普战66六代笔记本Win11重装教程：从U盘制作到跳过联网

2023款惠普战66六代笔记本Win11重装全流程指南 最近帮朋友折腾一台新入手的惠普战66六代笔记本&#xff0c;发现这款商务本在重装系统时有些细节需要特别注意。尤其是Win11的强制联网激活机制和BitLocker加密的坑&#xff0c;稍不注意就会让整个重装过程卡壳。下面把我实测可用…...

编程新知 2026/3/29 1:43:34

CMIP6数据降尺度实战：用Python从零构建区域气候模型（附完整代码）

CMIP6数据降尺度实战&#xff1a;用Python从零构建区域气候模型 当全球气候模型&#xff08;GCM&#xff09;的分辨率无法满足区域研究需求时&#xff0c;降尺度技术成为连接全球与局部气候信息的桥梁。本文将带您从CMIP6数据获取开始&#xff0c;逐步实现统计降尺度和动力降尺…...

编程新知 2026/3/29 1:27:24

ESP8266红外TCP服务框架：轻量级协议网关设计

1. 项目概述IrServiceBase是专为 ESP8266 系列微控制器&#xff08;包括 ESP-01、NodeMCU、Wemos D1 Mini 等&#xff09;设计的 Arduino C 库&#xff0c;其核心定位并非直接驱动红外发射/接收硬件&#xff0c;而是构建一个可复用、可扩展的 TCP/IP 红外服务框架。该库不实现底…...

编程新知 2026/3/29 1:03:17