<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>树生长动态演示</title>
<style>
body {
display: flex;
justify-content: center;
align-items: flex-end;
height: 100vh;
margin: 0;
background-color: #87CEEB;
overflow: hidden;
}
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: #8B4513;
}
.tree {
position: relative;
width: 10px;
height: 0;
background-color: #8B4513;
transform-origin: bottom center;
animation: grow 5s linear forwards;
}
.branch {
position: absolute;
width: 6px;
height: 0;
background-color: #8B4513;
transform-origin: bottom center;
}
.leaf {
position: absolute;
width: 15px;
height: 15px;
background-color: #228B22;
border-radius: 50%;
opacity: 0;
animation: fadeIn 1s forwards;
}
@keyframes grow {
0% { height: 0; }
100% { height: 300px; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div class="ground"></div>
<div class="tree" id="tree"></div>
<script>
const tree = document.getElementById('tree');
tree.addEventListener('animationend', () => {
// 创建主干
tree.style.height = '300px';
// 创建树枝
createBranches();
// 创建树叶
createLeaves();
});
function createBranches() {
const branchCount = 8;
for (let i = 0; i < branchCount; i++) {
const branch = document.createElement('div');
branch.className = 'branch';
// 随机位置和角度
const position = 50 + Math.random() * 200;
const angle = -45 + Math.random() * 90;
const length = 50 + Math.random() * 100;
branch.style.bottom = `${position}px`;
branch.style.left = '2px';
branch.style.transform = `rotate(${angle}deg)`;
branch.style.height = `${length}px`;
tree.appendChild(branch);
// 为树枝添加动画
setTimeout(() => {
branch.style.height = `${length}px`;
}, i * 200);
}
}
function createLeaves() {
const leafCount = 30;
for (let i = 0; i < leafCount; i++) {
const leaf = document.createElement('div');
leaf.className = 'leaf';
// 随机位置
const x = -10 + Math.random() * 30;
const y = 50 + Math.random() * 250;
leaf.style.left = `${x}px`;
leaf.style.bottom = `${y}px`;
// 随机大小
const size = 10 + Math.random() * 10;
leaf.style.width = `${size}px`;
leaf.style.height = `${size}px`;
tree.appendChild(leaf);
// 为树叶添加动画
setTimeout(() => {
leaf.style.opacity = '1';
}, i * 100);
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
