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

HTML+CSS+JS 实现3D风吹草动效果（B站视频）

news 2026/4/4 13:33:46

效果：

代码：

<!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站视频）

效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>3D effect&…...

编程日记 2024/7/11 17:59:32

常用网络概念

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 ☁️运维工程师的职责&#xff1a;监…...

编程日记 2024/7/11 17:58:31

图鸟UI框架在uni-app多端应用开发中的实践与应用

摘要&#xff1a; 随着移动互联网的蓬勃发展&#xff0c;跨平台应用开发已成为行业趋势。本文将探讨图鸟UI框架如何在uni-app开发环境下助力开发者高效构建多端应用&#xff0c;并通过具体案例展示其在实际项目中的应用效果。 一、引言 在移动应用开发领域&#xff0c;跨平台…...

编程日记 2024/7/11 17:57:29

特征值究竟体现了矩阵的什么特征？

特征值究竟体现了矩阵的什么特征&#xff1f; 简单来说就是x经过矩阵A映射后和自己平行 希尔伯特第一次提出eigenvalue,这里的eigen就是自己的。所以eigenvalue也称作本征值 特征值和特征向量刻画了矩阵变换空间的特征 对平面上的任意向量可以如法炮制&#xff0c;把他在特征…...

编程日记 2024/7/11 17:56:28

C语言-顺序表

&#x1f3af;引言 欢迎来到HanLop博客的C语言数据结构初阶系列。在这个系列中&#xff0c;我们将深入探讨各种基本的数据结构和算法&#xff0c;帮助您打下坚实的编程基础。本次我将为你讲解。顺序表&#xff08;也称为数组&#xff09;是一种线性表&#xff0c;因其简单易用…...

编程日记 2024/7/11 17:53:24

OpenCV漫水填充函数floodFill函数的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 功能描述 ffloodFill函数是OpenCV库中用于图像处理的一个功能&#xff0c;它用于填充与种子点颜色相近的连通区域。这个函数在很多场景下都非常有用&#x…...

编程日记 2024/7/11 17:51:22

redis内存分析

阿里云redis集群对key进行hash后保存在对应的后端节点&#xff0c;使每个节点的key数量大致相同&#xff0c;但是如果存在大key&#xff0c;就会导致单个节点内存用满&#xff0c;可以使用redis-rdb-tools 或rdr来对内存进行分析。 redis-rdb-tools redis-rdb-tools通过对dum…...

编程日记 2024/7/11 17:50:21

redis批量删除keys,用lua脚本。

文章目录 现象解决方法 现象 系统报错&#xff1a; misconf redis is configured to save ....后查看机器内存。 是内存满了&#xff0c;需要删除其中的key 解决方法 (1) 编写一个脚本&#xff0c;放在redis-cli.exe同一个目录 (2) 脚本内容如下&#xff1a; -- 使用Lua脚…...

编程日记 2024/7/11 17:49:20

Python-找客户软件

软件功能 请求代码&#xff1a; 填充表格&#xff1a; 可以search全国各个区县的所有企业信息&#xff0c;过滤手机号、查看是否续存/在业状态。方便找客户。 支持定-制-其他引-留-阮*件&#xff08;XHSS&#xff0c;DYY&#xff0c;KS&#xff0c;Bi-li*Bi-li&#xff09; V*…...

编程日记 2024/7/11 17:48:18

STM32 - PWR 笔记

PWR&#xff08;Power Control&#xff09;电源控制 PWR 负责管理 STM32 内部的电源供电部分&#xff0c;可以实现 可编程电压监测器 和 低功耗模式 的功能 可编程电压监测器&#xff08;PVD&#xff09;可以监控VDD电源电压&#xff0c;当VDD下降到PVD阀值以下或上升到PVD…...

编程日记 2024/7/11 17:47:17

标准盒模型和怪异盒子模型的区别

在 CSS 中&#xff0c;标准盒模型和怪异盒模型是两种不同的盒子模型计算方式&#xff0c;主要区别如下&#xff1a; 一、标准盒模型&#xff08;content-box&#xff09; 1. 定义与组成 - 标准盒模型是 CSS 中默认的盒模型。 - 它由内容区域&#xff08;content&#xff09;、…...

编程日记 2024/7/11 17:45:15

推荐算法——MRR

定义&#xff1a; MRR计算的是第一个正确答案的排名的倒数&#xff0c;并对所有查询取平均值。它衡量了模型在排序结果中快速找到正确答案的能力。 其中&#xff1a; Q 是查询的总数。ranki​ 是第 i 个查询中第一个正确答案的排名&#xff08;位置&#xff09;。如果第一个正…...

编程日记 2024/7/11 17:44:14

idea中打开静态网页端口是63342而不是8080

问题&#xff1a; 安装了tomcat 并且也配置了环境&#xff0c;但是在tomcat下运行&#xff0c;总是在63342下面显示。这也就意味着&#xff0c;并没有运行到tomcat环境下。 找了好几个教程&#xff08;中间还去学习了maven&#xff0c;因为跟的教程里面&#xff0c;没有maven,但…...

编程日记 2024/7/11 17:41:11

Vue3框架搭建3：配置说明-prettier配置

1、配置说明&#xff1a; .prettierrc.json{"$schema": "https://json.schemastore.org/prettierrc","semi": false,"tabWidth": 2,"singleQuote": true,"printWidth": 100,"trailingComma": "no…...

编程日记 2024/7/11 17:40:09

SQL MySQL定时器/事件调度器（Event Scheduler）

事件调度器&#xff08;Event Scheduler&#xff09;在MySQL数据库系统中是一个强大的功能组件&#xff0c;它允许用户定义一系列称为“事件”的数据库对象&#xff0c;这些事件在指定的时间或时间间隔自动执行预定义的SQL语句或操作。事件调度器通过维护一个时间计划表来管理这…...

编程日记 2024/7/11 17:38:07

从0到1构建渠道运营体系：实战案例与策略指南

引言 在当今竞争激烈的市场环境中&#xff0c;有效的渠道运营是企业实现产品或服务快速触达目标用户、提升市场份额的关键。从零开始构建一个高效的渠道运营体系&#xff0c;不仅需要深思熟虑的策略规划&#xff0c;还需要灵活应变的实战操作。本文将结合实战案例&#xff0c;…...

编程日记 2024/7/11 17:34:03

Java版Flink使用指南——将消息写入到RabbitMQ的队列中

大纲 新建工程新增依赖 编码自动产生数据写入RabbitMQ 测试工程代码 在 《Java版Flink使用指南——从RabbitMQ中队列中接入消息流》一文中&#xff0c;我们介绍了如何使用Java在Flink中读取RabbitMQ中的数据&#xff0c;并将其写入日志中。本文将通过代码产生一些数据&#xf…...

编程日记 2024/7/11 17:33:02

python excel openpyxl

python excel LTS 在开始之前&#xff0c;确保已经安装了 Python 和所需的库。 主要使用以下库&#xff1a; openpyxl&#xff1a;用于读取和写入 Excel 文件。 pandas&#xff1a;用于数据处理和分析。 xlwings&#xff1a;用于将 Python 与 Excel 连接&#xff0c;实现双向…...

编程日记 2024/7/11 17:32:00

C++八股（一）

目录 一、new和malloc ⭐ 二、class和struct的区别 ⭐ 三、char和int之间的转换 四、什么是野指针和悬挂指针 ⭐ 五、NULL和nullptr区别⭐ 六、指针常量和常量指针有何区别⭐ 七、物理内存和虚拟内存的区别⭐ 八、重载、重写和隐藏的区别⭐ 九、简述面向对象（OOP）的…...

编程日记 2024/7/11 17:30:58

【Git的基本操作】版本回退 | 撤销修改的三种情况 | 删除文件

目录 5.版本回退 5.1选项hard&后悔药 5.2后悔药&commit id 5.3版本回退的原理 6.撤销修改 6.1情况一 6.2情况二 6.3情况三 ​7.删除文件 Git重要能力之一马&#xff0c;版本回退功能。Git是版本控制系统&#xff0c;能够管理文件历史版本。本篇以ReadMe文件为…...

编程日记 2024/7/11 17:29:57

BiliTools AI视频总结：让B站学习效率提升300%的智能解决方案

BiliTools AI视频总结&#xff1a;让B站学习效率提升300%的智能解决方案 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱&#xff0c;支持下载视频、番剧等等各类资源 项目地址: https://gitcode.com/GitHub_Trending/bilit/BiliTools …...

编程新知 2026/4/4 13:19:54

7π/6 与 π/6 的关系

参考角&#xff08;Reference Angle&#xff09;的解释&#xff1a;7π/6 与 π/6 的关系 这在三角函数中非常重要&#xff0c;尤其是计算 sin、cos、tan 等值时。让我一步步解释清楚&#xff0c;特别是为什么 7π/6 的参考角是 π/6&#xff0c;以及它们之间的关系。整个解释…...

编程新知 2026/4/4 12:53:26

3个技巧教你玩转Dify工作流：从新手到高手的完整指南

3个技巧教你玩转Dify工作流&#xff1a;从新手到高手的完整指南 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程&#xff0c;自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/aw/Awesome-Dify-Wo…...

编程新知 2026/4/4 12:16:34

解决UE VR开发痛点：VRExpansionPlugin实战指南与架构优化

解决UE VR开发痛点&#xff1a;VRExpansionPlugin实战指南与架构优化 【免费下载链接】VRExpansionPlugin A UE4 VR framework 项目地址: https://gitcode.com/gh_mirrors/vr/VRExpansionPlugin 在UE VR开发中&#xff0c;开发者常面临手部追踪精度不足、交互系统复杂、…...

编程新知 2026/4/4 11:38:05

3步解锁网盘直链：LinkSwift八大平台高速下载完全指南

3步解锁网盘直链&#xff1a;LinkSwift八大平台高速下载完全指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云…...

编程新知 2026/4/4 11:01:42

Lepton AI与FastAPI集成：构建高性能AI API服务的终极指南

Lepton AI与FastAPI集成&#xff1a;构建高性能AI API服务的终极指南 【免费下载链接】leptonai A Pythonic framework to simplify AI service building 项目地址: https://gitcode.com/gh_mirrors/le/leptonai Lepton AI是一个Pythonic框架&#xff0c;专门用于简化AI…...

编程新知 2026/4/4 9:04:47

C#实战：5步搞定阿里健康药品追溯码接口对接（附完整签名源码）

C#实战&#xff1a;5步高效对接阿里健康药品追溯码API 在医院和药店管理系统中&#xff0c;药品追溯功能已成为刚需。阿里健康提供的药品追溯码查询接口&#xff0c;能帮助医疗机构快速获取药品全流程信息。作为.NET开发者&#xff0c;你可能需要将这个功能集成到现有ERP系统中…...

编程新知 2026/4/4 8:14:18

IMU660RA姿态解算实战：从传感器滤波到欧拉角输出的完整实现

1. IMU660RA姿态解算入门指南 刚拿到IMU660RA传感器时&#xff0c;我和大多数工程师一样兴奋又忐忑。这款常用于无人机和智能车的惯性测量单元&#xff0c;能提供关键的姿态数据&#xff0c;但原始数据就像未经打磨的玉石——需要一系列处理才能展现价值。姿态解算的核心目标&a…...

编程新知 2026/4/4 7:44:01

StructBERT模型监控方案：性能与质量实时追踪

StructBERT模型监控方案&#xff1a;性能与质量实时追踪 1. 引言 当你把StructBERT模型部署到生产环境后&#xff0c;最担心的是什么&#xff1f;是服务突然崩溃&#xff0c;还是响应速度变慢&#xff0c;或者是模型预测质量下降&#xff1f;这些问题如果等到用户投诉才发现&…...

编程新知 2026/4/4 7:44:01

OpenClaw智能相册管理：Qwen2.5-VL-7B自动分类与标注私人照片

OpenClaw智能相册管理&#xff1a;Qwen2.5-VL-7B自动分类与标注私人照片 1. 为什么需要智能相册管理&#xff1f; 每次打开手机相册&#xff0c;看到上万张杂乱无章的照片时&#xff0c;那种无力感想必很多人都深有体会。去年夏天&#xff0c;我在整理旅行照片时突然意识到—…...

编程新知 2026/4/4 7:29:59