HTML 實現落葉動態效果代碼
落葉動態效果可以為網站添加自然的氛圍感，使用戶有身臨其境的感覺。HTML 通過設置 CSS 樣式和 JavaScript 實現落葉動態效果非常簡單，下面就來介紹一下具體實現方式。
1. HTML 模板結構
通過 HTML 模板結構生成落葉效果需要兩個重要的元素，一個是包含所有落葉的容器，另一個是落葉本身。
<div class="leaves-container">
<img src="leaves.png" class="leaf">
</div>.leaves-container {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.leaf {
position: absolute;
width: 60px;
height: 60px;
opacity: 0.8;
transform: rotate(-40deg);
border-radius: 50%;
animation: fall 5s linear infinite;
}
@keyframes fall {
100% {
transform: translateY(100%) rotate(360deg);
}
}const leavesContainer = document.querySelector('.leaves-container')
for (let i = 0; i< 20; i++) {
const leaf = document.createElement('img')
leaf.src = 'leaves.png'
leaf.classList.add('leaf')
leaf.style.left = Math.random() * 100 + '%'
leaf.style.animationDelay = Math.random() * 5 + 's'
leavesContainer.appendChild(leaf)
}實現代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>落葉動態效果</title>
<style>
.leaves-container {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.leaf {
position: absolute;
width: 60px;
height: 60px;
opacity: 0.8;
transform: rotate(-40deg);
border-radius: 50%;
animation: fall 5s linear infinite;
}
@keyframes fall {
100% {
transform: translateY(100%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="leaves-container"></div>
<script>
const leavesContainer = document.querySelector('.leaves-container')
for (let i = 0; i < 20; i++) {
const leaf = document.createElement('img')
leaf.src = 'leaves.png'
leaf.classList.add('leaf')
leaf.style.left = Math.random() * 100 + '%'
leaf.style.animationDelay = Math.random() * 5 + 's'
leavesContainer.appendChild(leaf)
}
</script>
</body>
</html>