HTML+CSS+JS 实现3D风吹草动效果（B站视频）
效果：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>3D effect</title><style>* {margin: 0;padding: 0;}body {background-color: black;color: aliceblue;min-height: 100vh;display: grid;place-items: center;perspective: 1000px;}body * {transform-style: preserve-3d;}.scene {position: relative;animation: scene 40s infinite linear;}@keyframes scene {from {transform: rotateX(45deg) rotateZ(0deg);}to {transform: rotateX(45deg) rotateZ(360deg);}}.grid {position: absolute;inset: -10em;display: grid;grid-template-columns: repeat(10, 1fr);gap: 1.5em;}.grid i {position: relative;width: 100%;height: 100%;animation: i 5s var(--delay, 0s) infinite linear;}@keyframes i {from {transform: rotate(0deg) rotateX(30deg);}to {transform: rotate(360deg) rotateX(30deg);}}.grid i::before,.grid i::after {content: "";position: absolute;top: -950%;width: 120%;height: 2000%;transform: rotateX(90deg);border-radius: 50%;background-image: linear-gradient(#000000, rgb(7, 192, 41));}.grid i::after {transform: rotateX(90deg) rotateY(90deg);}</style></head><body><div class="scene"><div class="grid"></div></div><script>const gridElement = document.querySelector(".grid");let htmlCode = "";for (let i = 0; i < 100; i++) {let rowStarDelay = -0.2 * Math.floor(i / 10);let delay = rowStarDelay + -0.22 * (i % 10);htmlCode += `<i style="--delay:${delay}s;"></i>`;}gridElement.innerHTML = htmlCode;</script></body>
</html>
>>来自B站学习视频
up主：山羊の前端小窝
相关文章：
HTML+CSS+JS 实现3D风吹草动效果（B站视频）
效果： 代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>3D effect&…...
常用网络概念
📑打牌 ： da pai ge的个人主页 🌤️个人专栏 ： da pai ge的博客专栏 ☁️宝剑锋从磨砺出，梅花香自苦寒来 ☁️运维工程师的职责：监…...
图鸟UI框架在uni-app多端应用开发中的实践与应用
摘要： 随着移动互联网的蓬勃发展，跨平台应用开发已成为行业趋势。本文将探讨图鸟UI框架如何在uni-app开发环境下助力开发者高效构建多端应用，并通过具体案例展示其在实际项目中的应用效果。 一、引言 在移动应用开发领域，跨平台…...
特征值究竟体现了矩阵的什么特征？
特征值究竟体现了矩阵的什么特征？ 简单来说就是x经过矩阵A映射后和自己平行 希尔伯特第一次提出eigenvalue,这里的eigen就是自己的。所以eigenvalue也称作本征值 特征值和特征向量刻画了矩阵变换空间的特征 对平面上的任意向量可以如法炮制，把他在特征…...
C语言-顺序表
🎯引言 欢迎来到HanLop博客的C语言数据结构初阶系列。在这个系列中，我们将深入探讨各种基本的数据结构和算法，帮助您打下坚实的编程基础。本次我将为你讲解。顺序表（也称为数组）是一种线性表，因其简单易用…...
OpenCV漫水填充函数floodFill函数的使用
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 功能描述 ffloodFill函数是OpenCV库中用于图像处理的一个功能，它用于填充与种子点颜色相近的连通区域。这个函数在很多场景下都非常有用&#x…...
redis内存分析
阿里云redis集群对key进行hash后保存在对应的后端节点，使每个节点的key数量大致相同，但是如果存在大key，就会导致单个节点内存用满，可以使用redis-rdb-tools 或rdr来对内存进行分析。 redis-rdb-tools redis-rdb-tools通过对dum…...
redis批量删除keys,用lua脚本。
文章目录 现象解决方法 现象 系统报错： misconf redis is configured to save ....后查看机器内存。 是内存满了，需要删除其中的key 解决方法 (1) 编写一个脚本，放在redis-cli.exe同一个目录 (2) 脚本内容如下： -- 使用Lua脚…...
Python-找客户软件
软件功能 请求代码： 填充表格： 可以search全国各个区县的所有企业信息，过滤手机号、查看是否续存/在业状态。方便找客户。 支持定-制-其他引-留-阮*件（XHSS，DYY，KS，Bi-li*Bi-li） V*…...
STM32 - PWR 笔记
PWR（Power Control）电源控制 PWR 负责管理 STM32 内部的电源供电部分，可以实现 可编程电压监测器 和 低功耗模式 的功能 可编程电压监测器（PVD）可以监控VDD电源电压，当VDD下降到PVD阀值以下或上升到PVD…...
标准盒模型和怪异盒子模型的区别
在 CSS 中，标准盒模型和怪异盒模型是两种不同的盒子模型计算方式，主要区别如下： 一、标准盒模型（content-box） 1. 定义与组成 - 标准盒模型是 CSS 中默认的盒模型。 - 它由内容区域（content）、…...
推荐算法——MRR
定义： MRR计算的是第一个正确答案的排名的倒数，并对所有查询取平均值。它衡量了模型在排序结果中快速找到正确答案的能力。 其中： Q 是查询的总数。ranki 是第 i 个查询中第一个正确答案的排名（位置）。如果第一个正…...
idea中打开静态网页端口是63342而不是8080
问题： 安装了tomcat 并且也配置了环境，但是在tomcat下运行，总是在63342下面显示。这也就意味着，并没有运行到tomcat环境下。 找了好几个教程（中间还去学习了maven，因为跟的教程里面，没有maven,但…...
Vue3框架搭建3：配置说明-prettier配置
1、配置说明： .prettierrc.json{"$schema": "https://json.schemastore.org/prettierrc","semi": false,"tabWidth": 2,"singleQuote": true,"printWidth": 100,"trailingComma": "no…...
SQL MySQL定时器/事件调度器（Event Scheduler）
事件调度器（Event Scheduler）在MySQL数据库系统中是一个强大的功能组件，它允许用户定义一系列称为“事件”的数据库对象，这些事件在指定的时间或时间间隔自动执行预定义的SQL语句或操作。事件调度器通过维护一个时间计划表来管理这…...
从0到1构建渠道运营体系：实战案例与策略指南
引言 在当今竞争激烈的市场环境中，有效的渠道运营是企业实现产品或服务快速触达目标用户、提升市场份额的关键。从零开始构建一个高效的渠道运营体系，不仅需要深思熟虑的策略规划，还需要灵活应变的实战操作。本文将结合实战案例，…...
Java版Flink使用指南——将消息写入到RabbitMQ的队列中
大纲 新建工程新增依赖 编码自动产生数据写入RabbitMQ 测试工程代码 在 《Java版Flink使用指南——从RabbitMQ中队列中接入消息流》一文中，我们介绍了如何使用Java在Flink中读取RabbitMQ中的数据，并将其写入日志中。本文将通过代码产生一些数据…...
python excel openpyxl
python excel LTS 在开始之前，确保已经安装了 Python 和所需的库。 主要使用以下库： openpyxl：用于读取和写入 Excel 文件。 pandas：用于数据处理和分析。 xlwings：用于将 Python 与 Excel 连接，实现双向…...
C++八股（一）
目录 一、new和malloc ⭐ 二、class和struct的区别 ⭐ 三、char和int之间的转换 四、什么是野指针和悬挂指针 ⭐ 五、NULL和nullptr区别⭐ 六、指针常量和常量指针有何区别⭐ 七、物理内存和虚拟内存的区别⭐ 八、重载、重写和隐藏的区别⭐ 九、简述面向对象（OOP）的…...
【Git的基本操作】版本回退 | 撤销修改的三种情况 | 删除文件
目录 5.版本回退 5.1选项hard&后悔药 5.2后悔药&commit id 5.3版本回退的原理 6.撤销修改 6.1情况一 6.2情况二 6.3情况三 7.删除文件 Git重要能力之一马，版本回退功能。Git是版本控制系统，能够管理文件历史版本。本篇以ReadMe文件为…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
抖音增长新引擎：品融电商，一站式全案代运营领跑者
抖音增长新引擎：品融电商，一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...
腾讯云V3签名
想要接入腾讯云的Api，必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口，但总是卡在签名这一步，最后放弃选择SDK，这次终于自己代码实现。 可能腾讯云翻新了接口文档，现在阅读起来，清晰了很多&…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...