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)）。
相关文章：
HTMLCSS ：下雪了
这段代码创建了一个动态的雪花飘落加载动画，通过 CSS 技术实现了雪花的下落和消失效果，为页面添加了视觉吸引力和动态感。 大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能…...
力扣 84. 柱状图中最大的矩形
🔗 https://leetcode.cn/problems/largest-rectangle-in-histogram 题目 给一个数组 num 表示位置 i 上圆柱的高度，求圆柱可以勾勒出的矩形的最大面积 思路 枚举圆柱 i，以该圆柱为高，计算其可以组成的矩形的最大面积。记录这过…...
【Windows Server实战】生产环境云和NPS快速搭建
前置条件 本文假定你已达成以下前提条件： 有域控DC。有证书服务器（AD CS）。已使用Microsoft Intune或者GPO为客户机申请证书。服务器上至少有两张网卡（如果用虚拟机做的测试环境，可以用一张HostOnly网卡做测试&#…...
RHCSA——搭建FTP文件共享服务器
一、实验目的 1、掌握vsftpd服务器的配置方法 2、熟悉FTP客户端工具的使用 3、掌握常见的FTP服务器的故障排除 二、实验项目背景 某企业像架构一台FTP服务器，为企业局域网中的计算机提供文件传送的任务，为财务部门、销售部门和OA系统提供异地数据备…...
IM 即时通讯系统-50-[特殊字符]cim(cross IM) 适用于开发者的分布式即时通讯系统
IM 开源系列 IM 即时通讯系统-41-开源 野火IM 专注于即时通讯实时音视频技术，提供优质可控的IMRTC能力 IM 即时通讯系统-42-基于netty实现的IM服务端,提供客户端jar包,可集成自己的登录系统 IM 即时通讯系统-43-简单的仿QQ聊天安卓APP IM 即时通讯系统-44-仿QQ即…...
SSH代理實用指南
SSH是一種安全的遠程訪問協議，用於遠程登錄和代理工具，是一種通過SSH協議實現的網路代理，常用於將網路流量通過安全的SSH通道進行轉發。與傳統的HTTP代理不同，SSH代理能夠在多種協議下工作（如HTTP、HTTPS、FTP等&#…...
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: 抱歉&…...
ZZNUOJ(C/C++)基础练习1041——1050(详解版)
1041 : 数列求和2 题目描述 输入一个整数n，输出数列1-1/31/5-……前n项的和。 输入 输入只有一个整数n。 输出 结果保留2为小数,单独占一行。 样例输入 3 样例输出 0.87注意sum 1相当于sumsum1 注意sum * 1相当于sumsum*1 C语言版 #include<stdio.h> // 包含…...
JavaScript系列（51）--解释器实现详解
JavaScript解释器实现详解 🎯 今天，让我们深入探讨JavaScript解释器的实现。解释器是一个将源代码直接转换为结果的程序，通过理解其工作原理，我们可以更好地理解JavaScript的执行过程。 解释器基础概念 🌟 …...
浅析DDOS攻击及防御策略
DDoS（分布式拒绝服务）攻击是一种通过大量计算机或网络僵尸主机对目标服务器发起大量无效或高流量请求，耗尽其资源，从而导致服务中断的网络攻击方式。这种攻击方式利用了分布式系统的特性，使攻击规模更大、影响范围更广…...
深度学习 Pytorch 神经网络的学习
本节将从梯度下降法向外拓展，介绍更常用的优化算法，实现神经网络的学习和迭代。在本节课结束将完整实现一个神经网络训练的全流程。 对于像神经网络这样的复杂模型，可能会有数百个 w w w的存在，同时如果我们使用的是像交叉熵这样…...
【回溯】目标和 字母大小全排列
文章目录 494. 目标和解题思路：回溯784. 字母大小写全排列解题思路：回溯 494. 目标和 494. 目标和 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 或 - ，然后串联起所有整数，可以构造一个 表达式…...
Linux系统上安装与配置 MySQL（ CentOS 7 ）
目录 1. 下载并安装 MySQL 官方 Yum Repository 2. 启动 MySQL 并查看运行状态 3. 找到 root 用户的初始密码 4. 修改 root 用户密码 5. 设置允许远程登录 6. 在云服务器配置 MySQL 端口 7. 关闭防火墙 8. 解决密码错误的问题 前言 在 Linux 服务器上安装并配置 MySQL …...
Miniconda 安装及使用
文章目录 前言1、Miniconda 简介2、Linux 环境说明2.1、安装2.2、配置2.3、常用命令2.4、常见问题及解决方案 前言 在 Python 中，“环境管理”是一个非常重要的概念，它主要是指对 Python 解释器及其相关依赖库进行管理和隔离，以确保开发环境…...
记录一次，PyQT的报错，多线程Udp失效，使用工具如netstat来检查端口使用情况。
1.问题 报错Exception in thread Thread-1: Traceback (most recent call last): File "threading.py", line 932, in _bootstrap_inner File "threading.py", line 870, in run File "main.py", line 456, in udp_recv IndexError: list…...
kamailio-ACC_JSON模块详解【后端语言go】
要确认 ACC_JSON 模块是否已经成功将计费信息推送到消息队列（MQueue），以及如何从队列中取值，可以按照以下步骤进行操作： 1. 确认 ACC_JSON 已推送到队列 1.1 配置 ACC_JSON 确保 ACC_JSON 模块已正确配置并启用。以下…...
群晖NAS安卓Calibre 个人图书馆
docker 下载镜像johngong/calibre-web，安装之 我是本地的/docker/xxx/metadata目录 映射到 /usr/local/calibre-web/app/cps/metadata_provider CALIBREDB_OTHER_OPTION 删除 CALIBRE_SERVER_USER calibre_server_user 缺省用户名口令 admin admin123 另外有个N…...
android主题设置为..DarkActionBar.Bridge时自定义DatePicker选中日期颜色
安卓自定义DatePicker选中日期颜色 背景：解决方案：方案一：方案二：实践效果： 背景： 最近在尝试用原生安卓实现仿element-ui表单校验功能，其中的的选择日期涉及到安卓DatePicker组件的使用&#…...
pytorch实现基于Word2Vec的词嵌入
PyTorch 实现 Word2Vec（Skip-gram 模型） 的完整代码，使用 中文语料 进行训练，包括数据预处理、模型定义、训练和测试。 1. 主要特点 支持中文数据，基于 jieba 进行分词 使用 Skip-gram 进行训练，适用于小数据集 支持负采样，提升训练效率 使用 cosine similarity 计算相…...
彩色控制台，自动换行...学习个新概念：流操控器！[more cpp--11]
孩子们，我回来了。先看看今天我又学了什么CPP的没啥用新特性。彩色的控制台！ 还有很多的新花样！ 事情要从去年八月讲起，我那个时候在研究流函数，写了一些比较愚笨的代码。 为什么要研究这个呢？虽然我们的C…...
基于单片机的盲人智能水杯系统（论文+源码）
1 总体方案设计 本次基于单片机的盲人智能水杯设计，采用的是DS18B20实现杯中水温的检测，采用HX711及应力片实现杯中水里的检测，采用DS1302实现时钟计时功能，采用TTS语音模块实现语音播报的功能，并结合STC89C52单片机作…...
TensorFlow 示例摄氏度到华氏度的转换（一）
TensorFlow 实现神经网络模型来进行摄氏度到华氏度的转换，可以将其作为一个回归问题来处理。我们可以通过神经网络来拟合这个简单的转换公式。 1. 数据准备与预处理 2. 构建模型 3. 编译模型 4. 训练模型 5. 评估模型 6. 模型应用与预测 7. 保存与加载模型 …...
win10部署本地deepseek-r1，chatbox，deepseek联网（谷歌网页插件Page Assist）
win10部署本地deepseek-r1，chatbox，deepseek联网（谷歌网页插件Page Assist） 前言一、本地部署DeepSeek-r1step1 安装ollamastep2 下载deepseek-r1step2.1 找到模型deepseek-r1step2.2 cmd里粘贴 后按回车，进行下载 ste…...
【memgpt】letta 课程6： 多agent编排
Lab 6: Multi-Agent Orchestration 多代理协作 letta 是作为一个服务存在的，app通过restful api 通信 多智能体之间如何协调与沟通？ 相互发送消息共享内存块，让代理同步到不同的服务的内存块...
Java 大视界 -- Java 大数据在自动驾驶中的数据处理与决策支持（68）
💖亲爱的朋友们，热烈欢迎来到 青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...
【Linux】opencv在arm64上提示找不到libjasper-dev
解决opencv在arm64上提示找不到libjasper-dev的问题。 本文首发于❄慕雪的寒舍 问题说明 最近我在尝试编译opencv，安装依赖项libjasper1和libjasper-dev的时候就遇到了这个问题。在amd64平台上，我们可以通过下面的命令安装（ubuntu18.04&…...
计算机组成原理——存储系统（一）
在人生的道路上，成功与失败交织成一幅丰富多彩的画卷。不论我们是面对胜利的喜悦，还是遭遇失败的痛苦，都不能放弃对梦想的追求。正是在这种追求中，我们不断地超越自我，不断地突破自己的极限。只有勇往直前，…...
搜索引擎Agent)
【LLM-agent】(task4)搜索引擎Agent
note 新增工具：搜索引擎Agent 文章目录 note一、搜索引擎AgentReference 一、搜索引擎Agent import os from dotenv import load_dotenv# 加载环境变量 load_dotenv() # 初始化变量 base_url None chat_model None api_key None# 使用with语句打开文件…...
LabVIEW在电机自动化生产线中的实时数据采集与生产过程监控
在电机自动化生产线中，实时数据采集与生产过程监控是确保生产效率和产品质量的重要环节。LabVIEW作为一种强大的图形化编程平台，可以有效实现数据采集、实时监控和自动化控制。详细探讨如何利用LabVIEW实现这一目标，包括硬件选择、软件架构设…...
Baklib揭示内容中台与人工智能技术的创新协同效应
内容概要 在当今信息爆炸的时代，内容的高效生产与分发已成为各行业竞争的关键。内容中台与人工智能技术的结合，为企业提供了一种新颖的解决方案，使得内容创造的流程更加智能化和高效化。 内容中台作为信息流动的核心，能够集中管…...