HTML和CSS写圣诞树

秃头小宋s

于 2022-12-25 12:53:32 发布

阅读量314

点赞数 1

分类专栏： CSS JavaScript 文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_73634593/article/details/128434497

版权

JavaScript 同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

<audio src="./AllIWantforChristmasIsYou2.mp3"  controls autoplay loop></audio>
    <p class="word">Merry Christmas</p>
    <div class="tree">
        <!-- 星星 -->
        <div class="star">
            <div class="star-in"></div>
        </div>
        <!-- 树叶 -->
        <div class="leaf-box">
            <div class="leaf">
                <div class="edge"></div>
                <div class="edge right"></div>
            </div>
            <div class="leaf">
                <div class="edge"></div>
                <div class="edge right"></div>
            </div>
            <div class="leaf">
                <div class="edge"></div>
                <div class="edge right"></div>
            </div>
            <div class="leaf">
                <div class="edge"></div>
                <div class="edge right"></div>
            </div>
            <div class="leaf">
                <div class="edge"></div>
                <div class="edge right"></div>
            </div>
        </div>
        <!-- 树干 -->
        <div class="trunk"></div>
        <!-- 彩色灯球 -->
        <div class="ballbox">
            <div " class=" b1">🎅</div>
            <div class="b2">🎄</div>
            <div class="b3" style="color: #fff;">⛄︎</div>
            <div class="b4">🦌</div>
            <div class="b5">🍭</div>
            <div class="b6">🧦</div>
            <div class="b7">🔔</div>
            <div class="b8">🔮</div>
            <div class="b9">💡</div>
            <div class="b10">🥨</div>
            <div class="b11">⭐️</div>
            <div class="b12">🧚‍♀️</div>
            <div class="b13">🎆</div>
            <div class="b14">🎈</div>
        </div>
        <!-- 雪花 -->
        <div class="snow">
            <canvas id="canvas"></canvas>
        </div>
    </div>

* {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #020024;
        }

        .word {
            font-size: 22px;
            text-align: center;
            color: gold;
            padding-top: 50px;
            letter-spacing: 5px;
            text-shadow: 2px 4px 9px rgba(255, 255, 255, 0.7);
        }

        /* 圣诞树外层 */
        .tree {
            width: 200px;
            height: 300px;
            margin: 60px auto 0 auto;
            position: relative;
            border: 1px solid #fff;
            z-index: 10;
        }

        /* 星星 */
        .star {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: #fff;
            border-radius: 50%;
            top: -25px;
            z-index: 1000;
            left: 50%;
            transform: translateX(-50%);
            animation: starlight 8s ease infinite alternate;
            z-index: 10;
        }

        .star-in {
            position: absolute;
            left: 50%;
            top: 50%;
            border-right: 100px solid transparent;
            border-bottom: 70px solid gold;
            border-left: 100px solid transparent;
            transform: translateX(-50%) translateY(-50%) rotate(35deg) scale(0.14);
        }

        .star-in:before {
            border-bottom: 80px solid gold;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position: absolute;
            top: -45px;
            left: -65px;
            content: '';
            transform: rotate(-35deg);
        }

        .star-in:after {
            border-bottom: 70px solid gold;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            position: absolute;
            top: 3px;
            left: -105px;
            content: '';
            transform: rotate(-70deg);
        }

        /* 星星闪烁动画 */
        @keyframes starlight {
            0% {
                background: radial-gradient(ellipse at center,
                        gold 0%, rgba(255, 240, 158, 0.5)42%,
                        rgba(255, 242, 173, 0.2)58%,
                        rgba(255, 255, 255, 0.1) 100%);
            }

            25% {
                background: radial-gradient(ellipse at center,
                        gold 0%, rgba(255, 240, 158, 0.5)40%,
                        rgba(255, 242, 173, 0.2)60%,
                        rgba(255, 255, 255, 0.1) 100%);
            }

            50% {
                background: radial-gradient(ellipse at center,
                        gold 0%, rgba(255, 240, 158, 0.5)38%,
                        rgba(255, 242, 173, 0.2)62%,
                        rgba(255, 255, 255, 0.1) 100%);
            }

            75% {
                background: radial-gradient(ellipse at center,
                        gold 0%, rgba(255, 240, 158, 0.5)36%,
                        rgba(255, 242, 173, 0.2)64%,
                        rgba(255, 255, 255, 0.1) 100%);
            }

            100% {
                background: radial-gradient(ellipse at center,
                        gold 0%, rgba(255, 240, 158, 0.5)34%,
                        rgba(255, 242, 173, 0.2) 66%,
                        rgba(255, 255, 255, 0.1) 100%);
            }
        }

        /* 树叶部分 */
        .leaf {
            position: absolute;
            left: 50%;
            top: 3%;
            margin-left: -30px;
            background-color: #096148;
            width: 60px;
            height: 60px;
            border-radius: 0 10px 35px 10px;
            transform: rotate(45deg);
            box-shadow: 2px 7px 2px rgba(43, 43, 43, 0.2);
            z-index: 10;
        }

        .edge {
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: #096148;
            width: 25px;
            height: 30px;
            border-radius: 0 10px 35px 10px;
            transform: translateY(50%) translateX(0);
            z-index: 10;
        }

        .edge.right {
            position: absolute;
            left: unset;
            bottom: unset;
            top: 0;
            right: 0;
            background-color: #096148;
            width: 25px;
            height: 30px;
            border-radius: 0 10px 35px 10px;
            transform: translateY(0) translateX(50%);
            z-index: 10;
        }

        /* 偶数修改背景色 */
        .leaf:nth-child(even) {
            background-color: #00896c;
        }

        .leaf:nth-child(even) .edge {
            background-color: #00896c;
        }

        .leaf:nth-child(1) {
            z-index: 100;
            transform: rotate(45deg) scale(0.8);
        }

        .leaf:nth-child(2) {
            z-index: 99;
            top: 15%;
            transform: rotate(45deg) scale(1.3);
        }

        .leaf:nth-child(3) {
            z-index: 98;
            top: 28%;
            transform: rotate(45deg) scale(1.6);
        }

        .leaf:nth-child(4) {
            z-index: 97;
            top: 41%;
            transform: rotate(45deg) scale(1.9);
        }

        .leaf:nth-child(5) {
            z-index: 96;
            top: 55%;
            transform: rotate(45deg) scale(1.9);
        }

        /* 树干部分 */
        .trunk {
            width: 25px;
            height: 45px;
            border-radius: 0 0 3px 3px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 20px;
            z-index: 1;
            box-shadow: 0 0 10px 5px #191919;
            background: linear-gradient(0deg, #6d411b 0%, #5a341d 64%);
            z-index: 10;
        }
        .ballbox {
            position: relative;
        }

        .ballbox div {
            position: absolute;
            z-index: 100;
        }

        .b1 {
            left: 87px;
            top: 30px;
        }

        .b2 {
            left: 55px;
            top: 50px;
        }

        .b3 {
            left: 125px;
            top: 65px;
        }

        .b4 {
            left: 80px;
            top: 90px;
        }

        .b5 {
            left: 95px;
            top: 140px;
        }

        .b6 {
            left: 40px;
            top: 160px;
        }

        .b7 {
            left: 80px;
            top: 165px;
        }

        .b8 {
            left: 45px;
            top: 110px;
        }

        .b9 {
            left: 130px;
            top: 120px;
        }

        .b10 {
            left: 150px;
            top: 170px;
        }

        .b11 {
            left: 160px;
            top: 210px;
        }

        .b12 {
            left: 15px;
            top: 200px;
        }

        .b13 {
            left: 70px;
            top: 210px;
        }

        .b14 {
            left: 110px;
            top: 200px;
        }