使用HTML实现一个不一样的圣诞树

一、前言

     明天就是圣诞节了，抓紧时间写一个代码来庆祝。写什么好呢？就用HTML实现一个动态的圣诞树吧。我能想到也就是有圣诞树了

二、效果展示

 

三、实现步骤

首先，我们把body默认margin和padding设为0，并把背景设为墨绿色。为了让圣诞树展示好看，再给body添加一个flex布局，让圣诞树展示在页面中间。

        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        body{
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            background-color: rgb(54,66,70);
        }

该下来实现圣诞树，可以分为两部分，第一部分树顶的星星，第二部分旋转的12条线（12个小 li）

星星部分用div实现，线条用li标签，外面套上一个ul标签

        


<----------------->
    .tree{
            position: relative;
            width: 500px;
            height: 700px;
            display: flex;
            justify-content: center;
        }

 li 一会用script动态添加

星星实现思路：

我们可以给div一个大小，50x50，这样成一个正方形。然后对齐添加clip-path属性裁剪成星星形状

    .star{
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: rgb(236,234,167);
            z-index: 999;
            margin-bottom: 40px;
            clip-path: polygon(50% 0,65% 40%,100% 40%,72% 60%);
        }

树干实现思路：

因为要有12条树干，要写12个li标签，为了省事我们可以用JavaScript动态生成

    let tree = document.querySelector('.tree');
    for(let i = 0;i<128;i++){
        let li = document.createElement('li');
        li.style="--i:"+i;
        tree.appendChild(li);
    }

 然后在css中对其添加动画效果，树干上的小点用::before来写。

完整代码在下面获取

四、编码实现