300行HTML+CSS+JS代码实现动态圣诞树
以下是一个简化的代码示例，展示了如何使用HTML、CSS和JavaScript来创建一个基本的动态圣诞树。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态圣诞树</title>
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #222;
}
#tree-container {
position: relative;
width: 300px;
height: 300px;
background: #5C3;
border-radius: 50%;
}
#tree-lights {
position: absolute;
bottom: -20px;
width: 100%;
height: 20px;
background: radial-gradient(circle at center, #fff, transparent);
}
</style>
</head>
<body>
<div id="tree-container"></div>
<script>
const treeContainer = document.getElementById('tree-container');
const lights = document.createElement('div');
lights.id = 'tree-lights';
treeContainer.appendChild(lights);
function animateLights() {
const lightsHeight = lights.clientHeight;
const newPosition = Math.random() * (300 - lightsHeight) + lightsHeight * -1;
lights.style.transform = `translateY(${newPosition}px)`;
}
setInterval(animateLights, 1000);
</script>
</body>
</html>这段代码创建了一个简单的动画效果，使得“光”在圣诞树的顶部随机移动。虽然这不是一个完整的动态圣诞树实现，但它展示了如何使用HTML、CSS和JavaScript来创建交互式元素，并实现简单的动画效果。
评论已关闭