用HTML写一个华丽的圣诞树
时间: 2023-02-06 11:36:48 浏览: 80
这是用HTML写的一个华丽的圣诞树:
```
<html>
<head>
<style>
/* 为圣诞树添加样式 */
.christmas-tree {
/* 定义圣诞树的颜色、宽度和高度 */
color: green;
width: 300px;
height: 500px;
}
/* 定义圣诞树的背景图片 */
.christmas-tree:before {
content: "";
background-image: url('https://i.imgur.com/4v8TQT1.png');
/* 调整背景图片的大小和位置 */
background-size: cover;
background-position: center;
/* 设置背景图片的宽度和高度 */
width: 300px;
height: 500px;
/* 设置背景图片的层叠顺序 */
z-index: -1;
/* 将背景图片作为圣诞树的前缀插入 */
display: block;
}
/* 为圣诞树的每个圆圈添加样式 */
.circle {
/* 设置圆圈的宽度和高度 */
width: 20px;
height: 20px;
/* 设置圆圈的背景颜色 */
background-color: red;
/* 设置圆圈的圆角 */
border-radius: 50%;
/* 设置圆圈的层叠顺序 */
z-index: 1;
/* 设置圆圈的定位方式 */
position: absolute;
}
/* 为圣诞树的每个圆圈添加动画效果 */
.circle:hover {
/* 在圆圈上方添加光线效果 */
box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.5);
}
</style>
</head>
<body>
<!-- 在页面中插入圣诞树 -->
<div class="christmas-tree">
<!-- 在圣诞树上方插入圆圈 -->
<div class="circle" style="top: 10px; left: