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

最新推荐文章于 2023-12-08 16:37:19 发布

爱躺平的威威

最新推荐文章于 2023-12-08 16:37:19 发布

阅读量2.4k

点赞数 4

分类专栏： # 移动WEB开发文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_53564801/article/details/128429622

版权

移动WEB开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、前言

明天就是圣诞节了，抓紧时间写一个代码来庆祝。写什么好呢？就用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标签

<ul class="tree">
        <dis class="star"></dis>
</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来写。

完整代码在下面获取

四、编码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChirstmasTrees</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style:none;
        }
        body{
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            background-color: rgb(54,66,70);
        }
        .tree{
            position: relative;
            width: 500px;
            height: 700px;
            display: flex;
            justify-content: center;
        }
        .start{
            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%,
                                85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%);                    
        }
        .tree li{
            position: absolute;
            top:25px;
            width: 2px;
            background: linear-gradient(rgba(46,204,113,0),rgba(46,204,113,.25));
            transform-origin: 50% 0;
            animation:swing 4s ease-in-out infinite;
            height: calc(var(--i)*4px);
            animation-delay: calc(var(--i)*-0.23s);
        }
        @keyframes swing{
            0%,
            100%{
                transform: rotate(-30deg);
            }
            5%,45%{
                opacity: 0.25;
            }
            0%,45%,100%{
                opacity: 1;
            }
            50%{
                transform: rotate(30deg);
            }
        }

        .tree li::before{
            content: '';
            position: absolute;
            left:-1px;
            bottom: 1px;
            width: 3px;
            height: 3px;
        }
        .tree li:nth-child(4n)::before{
            background-color: #d8334a;
        }
        .tree li:nth-child(4n+1)::before{
            background-color: #ffce54;
        }
        .tree li:nth-child(4n+2)::before{
            background-color: #2ecc71;
        }
        .tree li:nth-child(4n+3)::before{
            background-color: #5d9cec;
        }

    </style>
</head>
<body>
    <ul class="tree">
        <dis class="start"></dis>
    </ul>
</body>
<script>
    let tree = document.querySelector('.tree');
    for(let i = 0;i<128;i++){
        let li = document.createElement('li');
        li.style="--i:"+i;
        tree.appendChild(li);
    }
</script>
</html>