超炫！抖音彼岸花特效 HTML+CSS+JS 代码全解析

下面为你提供一个使用 HTML、CSS 和 JavaScript 实现抖音风格彼岸花特效的代码示例。此示例将创建一个包含彼岸花动画的网页。代码实现 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>抖音彼岸花特效</title> <style> /* 设置整个页面的样式 */ body { margin: 0; padding: 0; background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } /* 定义彼岸花容器的样式 */ .flower-container { position: relative; width: 300px; height: 300px; } /* 定义花瓣的样式 */ .petal { position: absolute; width: 10px; height: 30px; background-color: #ff0066; border-radius: 50%; transform-origin: bottom center; animation: fall 5s linear infinite; } /* 定义花瓣下落的动画 */ @keyframes fall { 0% { transform: translateY(-300px) rotate(0deg); opacity: 1; } 100% { transform: translateY(300px) rotate(360deg); opacity: 0; } } </style> </head> <body> <div class="flower-container" id="flower-container"></div> <script> // 获取彼岸花容器元素 const flowerContainer = document.getElementById('flower-container'); // 定义创建花瓣的函数 function createPetal() { // 创建一个新的花瓣元素 const petal = document.createElement('div'); petal.classList.add('petal'); // 随机设置花瓣的初始位置 petal.style.left = Math.random() * 300 + 'px'; // 随机设置花瓣的旋转角度 petal.style.transform = `rotate(${Math.random() * 360}deg)`; // 随机设置花瓣的动画延迟时间 petal.style.animationDelay = Math.random() * 5 + 's'; // 将花瓣添加到彼岸花容器中 flowerContainer.appendChild(petal); // 一段时间后移除花瓣以避免内存泄漏 setTimeout(() => { petal.remove(); }, 5000); } // 每隔一段时间创建一个新的花瓣 setInterval(createPetal, 200); </script> </body> </html> ``` 代码解释 1. HTML 部分：创建了一个包含 `flower-container` 类的 `div` 元素，作为彼岸花花瓣的容器。 2. CSS 部分： - `body` 样式设置了页面的颜色、布局方式和溢出处理。 - `flower-container` 类定义了彼岸花容器的样式。 - `petal` 类定义了花瓣的样式，包括颜色、形状和动画效果。 - `@keyframes fall` 定义了花瓣下落的动画。 3. JavaScript 部分： - `createPetal` 函数用于创建一个新的花瓣元素，并设置其初始位置、旋转角度和动画延迟时间。 - `setInterval` 函数每隔一段时间调用 `createPetal` 函数，以不断创建新的花瓣。额外注意的逻辑点 1. 动画的持续时间和延迟时间是随机的，可能会导致某些花瓣的效果不够自然。可以根据需要调整随机数的范围。 2. 为了避免内存泄漏，使用 `setTimeout` 函数在花瓣动画结束后将其从 DOM 中移除。 3. 可以通过修改 CSS 样式中的颜色、大小和形状，来改变花瓣的外观。 ######[AI写代码神器 | 957点数解答 | 2025-06-02 20:38:33]

服务商

更多选项

快捷项

自定义