使用html画一个动态的圣诞树

最新推荐文章于 2023-07-11 17:54:37 发布

八位数花园

最新推荐文章于 2023-07-11 17:54:37 发布

阅读量119

点赞数

文章标签： html css css3 前端 html5

本文链接：https://blog.csdn.net/weixin_35756130/article/details/129076089

版权

你好！这是一个使用 HTML 画一个动态的圣诞树的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置圣诞树的样式 */
    #christmas-tree {
      height: 300px;
      width: 200px;
      background-color: green;
      position: relative;
    }

    /* 设置圣诞树的圆形的样式 */
    .circle {
      border-radius: 50%;
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      top: -25px;
      left: 75px;
      animation: twinkle 1s infinite;
    }

    /* 设置圣诞树的叶子的样式 */
    .leaf {
      height: 100px;
      width: 50px;
      background-color: green;
      position: absolute;
      bottom: 0;
      transform: rotate(45deg);
    }

    /* 设置圣诞树闪烁的动画 */
    @keyframes twinkle {
      50% {
        opacity: 0.5;
      }
    }
  </style>
</head>
<body>
  <!-- 使用 div 元素画出圣诞树 -->
  <div id="christmas-tree">
    <!-- 使用 div 元素画出圣诞树的圆形 -->
    <div class="circle"></div>
    <!-- 使用 div 元素画出圣诞树的叶子 -->
    <div class="leaf" style="left: 0"></div>
    <div class="leaf" style="left: 25px"></div>
    <div class="leaf" style="left: 50px"></div>
    <div class="leaf" style="left: 75px"></div>
    <div class="leaf" style="left: 100px"></div>
    <div class="leaf" style="left: 125px"></div>
    <div class="leaf" style="left: 150px"></div>
    <div class="leaf" style="left: 175px"></div>
  </div>
</body>
</html>