首页樱花树代码html动态js

樱花树代码html动态js

时间: 2024-10-21 18:15:45 浏览: 42

如果你想在HTML中创建一个简单的樱花树的动画效果，并结合JavaScript动态控制，你可以这样做：首先，在HTML中设置基础结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>樱花树</title> <style> .sakura-tree { position: relative; width: 400px; height: 400px; background-image: url('sakura_tree.png'); /* 你的樱花图片 */ } .petal { position: absolute; width: 5px; height: 20px; background-color: pink; } </style> </head> <body> <div class="sakura-tree">  </div> <script src="script.js"></script> </body> </html> ``` 然后，在`script.js`文件中添加JavaScript代码，模拟花瓣飘落： ```javascript window.onload = function() { const sakuraTree = document.querySelector('.sakura-tree'); for (let i = 0; i < 100; i++) { // 创建100片花瓣 const petal = document.createElement('div'); petal.classList.add('petal'); petal.style.top = Math.random() * 400 + 'px'; // 随机位置 petal.style.left = Math.random() * 400 + 'px'; sakuraTree.appendChild(petal); // 添加随机飘落动画效果 setInterval(() => { petal.style.top += 1 - (Math.random() * 2); // 飘落速度随机 if (parseInt(petal.style.top) >= sakuraTree.offsetHeight) { petal.remove(); // 落地消失 } }, 100); // 每隔100毫秒更新一次位置 } }; ``` 在这个例子中，我们创建了`<div>`元素作为花瓣，并随机赋予它们位置。然后每过一段时间，花瓣就会向下移动，当达到树底高度时，花瓣会被移除。

阅读全文