飘动的枫叶动态效果
时间: 2024-01-21 09:20:01 浏览: 108
实现飘动的枫叶动态效果可以使用CSS3动画和JavaScript结合实现。以下是一个简单的实现方式:
HTML代码:
```
<div id="maple-leaf"></div>
```
CSS代码:
```
#maple-leaf {
width: 50px;
height: 50px;
background-image: url('maple-leaf.png');
background-size: cover;
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
animation: maple-leaf 3s ease-in-out infinite;
}
@keyframes maple-leaf {
0% {
top: -50px;
transform: translateX(-50%) rotate(0deg);
}
50% {
top: 100vh;
transform: translateX(-50%) rotate(180deg);
}
100% {
top: -50px;
transform: translateX(-50%) rotate(360deg);
}
}
```
JavaScript代码:
```
// 在页面加载完成后执行
window.onload = function() {
// 创建多个枫叶元素
for (var i = 0; i < 10; i++) {
var leaf = document.createElement('div');
leaf.id = 'maple-leaf-' + i; // 给每个枫叶元素设置唯一的ID
leaf.className = 'maple-leaf'; // 设置CSS类名
document.body.appendChild(leaf); // 将元素添加到页面中
}
}
```
需要注意的是,上述代码中使用了一个名为“maple-leaf.png”的图片作为枫叶的背景图案,需要将其放置到与HTML文件同一目录下。
阅读全文