用HTML写一个华丽的圣诞树

一筐猪的头发丝

于 2022-12-25 10:56:13 发布

阅读量96

点赞数

文章标签： html css css3 前端 javascript

本文链接：https://blog.csdn.net/weixin_35752645/article/details/129083645

版权

<p>这是用HTML写的一个华丽的圣诞树：</p>
<p>```</p>
<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:

一筐猪的头发丝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用HTML写一个华丽的圣诞树

<p>这是用HTML写的一个华丽的圣诞树：</p><p>```</p><html> <head> <style> /* 为圣诞树添加样式 */ .christmas-tree { /* 定义圣诞树的颜色、宽度和高度 */ color: gree...
复制链接

扫一扫