html特效代码 枫叶,jQuery飘落的枫叶
时间: 2023-12-23 14:26:49 浏览: 55
以下是一个简单的HTML和jQuery代码,可以实现飘落的枫叶特效:
```html
<!DOCTYPE html>
<html>
<head>
<title>飘落的枫叶特效</title>
<style>
.leaf {
position: absolute;
width: 50px;
height: 50px;
background-image: url("https://cdn.pixabay.com/photo/2013/10/01/09/01/leaf-188991_960_720.jpg");
background-size: contain;
background-repeat: no-repeat;
animation: leaf-fall 10s linear infinite;
}
@keyframes leaf-fall {
0% {
transform: translate(0, -100%);
}
100% {
transform: translate(100vw, 100vh);
}
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var leaves = ["leaf1", "leaf2", "leaf3", "leaf4", "leaf5"];
var colors = ["#ff0000", "#ff9900", "#cc3300", "#993300"];
setInterval(function() {
var randomLeaf = leaves[Math.floor(Math.random() * leaves.length)];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
var leaf = $("<div class='leaf'></div>").addClass(randomLeaf).css("background-color", randomColor);
leaf.css("left", Math.random() * $(window).width() + "px");
$("body").append(leaf);
}, 500);
});
</script>
</body>
</html>
```
这个代码使用了CSS动画和jQuery,通过创建多个带有不同样式的枫叶元素并让它们以不同速度和方向飘落来实现特效。