html+实现旋转圣诞树代码
时间: 2023-12-26 11:28:07 浏览: 25
以下是使用HTML和CSS实现旋转圣诞树的代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.tree {
position: relative;
width: 200px;
height: 300px;
margin: 0 auto;
}
.tree:before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 150px solid green;
transform: translateX(-50%);
}
.tree .ornament {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
transform-origin: bottom center;
animation: rotateOrnament 2s infinite linear;
}
@keyframes rotateOrnament {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="tree">
<div class="ornament" style="top: 50px; left: 90px;"></div>
<div class="ornament" style="top: 100px; left: 70px;"></div>
<div class="ornament" style="top: 150px; left: 110px;"></div>
</div>
</body>
</html>
```
这段代码使用了HTML和CSS来创建一个旋转的圣诞树。通过设置`position`属性和`transform`属性,实现了树的形状和旋转效果。同时,使用`animation`属性和`@keyframes`规则来实现装饰品的旋转动画效果。