圣诞树动态html网页代码
时间: 2023-12-17 08:29:00 浏览: 64
以下是一个简单的圣诞树动态HTML网页代码的例子,使用了CSS3动画和JavaScript实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>Christmas Tree</title>
<style>
body {
background-color: #1a1a1a;
}
.tree {
position: relative;
margin: 0 auto;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #006400;
animation: tree 5s ease-in-out infinite;
}
.star {
position: absolute;
top: -30px;
left: 25px;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid gold;
transform: rotate(35deg);
animation: star 5s ease-in-out infinite;
}
@keyframes tree {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes star {
0% {
transform: rotate(35deg) scale(1);
}
50% {
transform: rotate(35deg) scale(1.5);
}
100% {
transform: rotate(35deg) scale(1);
}
}
</style>
</head>
<body>
<div class="tree">
<div class="star"></div>
</div>
<script>
// 可以使用JavaScript控制圣诞树的高度
var tree = document.querySelector('.tree');
var star = document.querySelector('.star');
var height = prompt('请输入圣诞树的高度(单位:像素):', '100');
tree.style.borderBottom = height + 'px solid #006400';
star.style.top = - (height / 3) + 'px';
</script>
</body>
</html>
```