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

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

news 2025/7/17 22:17:49

效果：

代码：

<!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.lryc.cn/news/397561.html