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，一经查实，立即删除！