HTML动态圣诞树代码
时间: 2024-11-05 22:02:19 浏览: 174
HTML动态圣诞树代码通常使用CSS和JavaScript结合来创建交互式的动画效果。下面是一个简单的例子,它展示了如何使用纯HTML、CSS来构建一棵静态的圣诞树,然后通过JavaScript添加一些基本的动态元素:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.tree {
position: relative;
width: 200px;
height: 400px;
}
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: absolute;
top: 175px;
}
</style>
</head>
<body>
<div class="tree">
<div class="triangle"></div>
<div class="star" style="position: absolute; top: 185px; left: 95px;"></div>
</div>
<script>
// JavaScript 动态旋转三角形
setInterval(function() {
var triangle = document.querySelector('.triangle');
triangle.style.transform = 'rotate(2deg)';
}, 30);
// JavaScript 渐变动画
function fadeOut() {
var star = document.querySelector('.star');
var opacity = 1;
var id = setInterval(frame, 30);
function frame() {
if (opacity <= 0.05) { clearInterval(id); }
star.style.opacity = opacity;
opacity -= 0.05;
}
}
fadeOut();
</script>
</body>
</html>
```
这个代码首先创建了一个红色三角形作为树冠,然后用CSS定位了一个白色星形作为星星装饰。JavaScript部分用于让三角形每30毫秒旋转2度,以及让星星渐隐渐现。
阅读全文