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主:山羊の前端小窝

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/44940.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开发指南043-自定义注解

现代Java编程大量使用注解&#xff0c;可以很方便的简化编程&#xff0c;提高编程效率。作为一个平台&#xff0c;也定义了自己的注解。过程如下&#xff1a; 第一步新建java文件&#xff0c;非常类似接口类&#xff1a; import java.lang.annotation.*; public interface …

[迫真保姆级教程]在Windows上编译可用的Tesseract OCR in C++ 并部署在Visual Studio与Qt6上

目录 前言 阅前提示 导言 使用基于vcpkg的&#xff0c;于msvc19编译器编译的Tessereact OCR动态库 使用vcpkg辅助我们的编译 正文 使用msys2环境下的&#xff0c;使用mingw64编译器编译的Tessereact OCR动态库 什么是msys2 安装前&#xff0c;我们也许。。。 [Option]…

网络钓鱼中的高级同形异义:网络安全的新威胁

网络安全正面临一个潜在的新威胁&#xff1a;在网络钓鱼攻击中使用同形异义词。 这篇调查文章探讨了同形异义现象如何在各种类型的网络钓鱼攻击中使用、其背后的技术。 对这种恶意行为的研究以及高级语言模型 (LLM) 如何帮助加速同形异形现象的研究。 什么是同形异义&#xf…

dxf数据结构

DXF&#xff08;Drawing Exchange Format&#xff0c;绘图交换格式&#xff09;是Autodesk公司开发的一种CAD&#xff08;计算机辅助设计&#xff09;文件格式&#xff0c;用于实现AutoCAD与其他软件之间的CAD数据交换。DXF格式文件是一种开放的矢量数据格式&#xff0c;具有多…

怎么办?我的C盘又爆红了!别慌!博主手把手带你管理你的C盘空间~

怎么办&#xff1f;我的C盘又爆红了&#xff01;别慌&#xff01;博主手把手带你管理你的C盘空间~ 文章目录 怎么办&#xff1f;我的C盘又爆红了&#xff01;别慌&#xff01;博主手把手带你管理你的C盘空间~0. 在开始清理之前1. 推荐执行的操作1.1 清理系统缓存文件1.2 磁盘清…

MySQL和Redis更新一致性问题

1. 先更新数据库&#xff0c;再更新缓存 适用场景&#xff1a;适用于对数据一致性要求不是特别高&#xff0c;且缓存更新失败对 系统影响较小的场景。例如&#xff0c;某些非关键数据的缓存更新。 风险&#xff1a;如果缓存更新失败&#xff0c;会导致数据库和缓存数据不一致。…

[RK3566-Android11] 使用iPhone14/15出现的蓝牙断开重连无声音问题

问题描述 RK3566使用的RTL8822CS模块&#xff0c;打了a2dpsink 蓝牙音响补丁&#xff0c;蓝牙用作播放歌曲和歌词显示。 测试发现使用Iphone14/15在开机之后10分钟内连接播放再断开&#xff0c;连接播放再断开&#xff0c;重复三四次&#xff0c;蓝牙就会无声音。使用iphone11…

淘宝详情数据获取的 API 之旅:突破与创新

在电商世界的广袤星空中&#xff0c;淘宝犹如一颗璀璨的巨星&#xff0c;其商品详情数据宛如神秘的宝藏&#xff0c;吸引着无数探索者。而 API 接口&#xff0c;则是我们开启这宝藏之门的神奇钥匙。 一、淘宝详情数据&#xff1a;商业洞察的密码 淘宝的商品详情数据&#xff0…

实战精选 | 如何在一台 Linux AI PC 上高效运行 OpenVINO™

点击蓝字 关注我们 作者&#xff1a;Adrian Boguszewski&#xff0c;英特尔 AI 软件布道师 武卓博士&#xff0c;英特尔 AI 软件布道师 什么是 AI PC&#xff0c;为什么它有一个特殊的名字&#xff1f; AI PC 是时下 PC 领域的一个热门话题。与普通 PC 不同&#xff0c;AI PC 配…

AI绘画Stable Diffusion超现实风格电商场景,五个电商专用LoRA分享,制作电商场景变现教程!

前言 本次教程将使用AI绘画工具 Stable Diffusion 进行讲解&#xff0c;如还未安装SD的小伙伴可以看我往期入门教程2024最新超强AI绘画Stable Diffusion整合包安装教程&#xff0c;一键教你本地部署&#xff01;&#xff0c;安装包请扫描免费获取哦https://blog.csdn.net/z199…

如何利用python进行统计显著性检验

在统计学中,显著性差异检验是用来决定两组或多组数据之间是否存在统计学上的差异。若存在显著性差异,则说明数据集之间不是来自于同一个分布。在Python中,可以使用多种方法来进行显著性差异检验,如t检验、KS检验、Wilcoxon符号秩检验等。下面将详细介绍如何使用Python来判断…

初阶数据结构(顺序表的实现)

1. 线性表 线性表是&#xff08;linear list&#xff09;n个具有相同特性的数据元素的有限队列。线性表是一种在实际广泛应用的的数据结构&#xff0c;常见的线性表&#xff1a;顺序表&#xff0c;链表&#xff0c;栈&#xff0c;队列&#xff0c;字符串。。。 线性表在逻辑结…

招采全流程电子化优势及重要功能环节(数智化招采系统)

招投标全流程电子化&#xff0c;是加速招标采购领域数字化转型、创新招标采购交易机制的重要举措。它在构建高效规范、公平竞争、充分开放的大市场环境中起着至关重要的作用。 招采电子化历史沿革 2013年2月&#xff0c;国家发展改革委等八部门发布了《电子招标投标办法》&am…

【git命令大全】

一个练习git命令的平台&#xff1a;Learn Git Branching 1. git status -s --查看仓库状态 2. git add 文件名 --添加需要提交的文件名&#xff08;加路径--参考git status 打印出来的文件路径&#xff09; 3. git stash -u -k --忽略其他文件&#xff0c;把现修改的隐藏…

python杨辉三角的两种书写方式

第一种&#xff08;设置二维列表设置每个元素为0进行替换元素&#xff09; 代码演示&#xff1a; n eval(input("请输入想要的行数")) lst[[0 for j in range(n)] for i in range(n)] # lst2[[0]*n]*n for i in range(n):for j in range(i1):if j0 or ji:lst[i][j…

七款好用的电脑监控软件推荐|电脑屏幕监控软件最新整理!

电脑监控软件在家庭和企业环境中变得越来越重要。它们帮助父母监督孩子的在线活动&#xff0c;也帮助企业确保员工在工作时间内的生产力和数据安全。以下是七款优秀的电脑监控软件推荐&#xff0c;希望能帮助您选择。 固信软件https://www.gooxion.com/ 固信软件 固信软件提供…

极狐GitLab 17.0 重磅发布,100+ DevSecOps功能更新来啦~【七】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff1a;https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署…

数据库中的数据视图(View):深入理解与应用

引言 编程梦想家&#xff08;大学生版&#xff09;-CSDN博客 在数据库管理中&#xff0c;数据视图&#xff08;View&#xff09;是一个非常重要的概念&#xff0c;它提供了一种虚拟的表结构&#xff0c;其内容由查询定义。数据视图对于简化复杂查询、增强数据安全性以及逻辑数…

Java基础-组件及事件处理(下)

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 面板组件 说明 常见组件 JScrollPane常用构造方法 JScrollPane设置面板滚动策略的方法 JScrollPane滚…

为什么广告需要教育视频

教育视频作为一种广告工具越来越受欢迎&#xff0c;因为它们能够有效地传达信息并吸引观众的注意力。以下是需要此类视频的几个关键原因&#xff1a; 提高参与度 互动性&#xff1a;教育视频吸引注意力&#xff0c;让观众长时间参与&#xff0c;并让他们参与学习过程。产品演…