【好看的CSS分享】提前祝大家圣诞节快乐、纯前端实现圣诞树

最新推荐文章于 2024-07-04 16:37:43 发布

qq_38192105

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量538

点赞数 9

文章标签：前端 css3 html5 css

本文链接：https://blog.csdn.net/qq_38192105/article/details/135135212

版权

纯开发着玩儿的，抱着日积月累的想法，也防止突然要用时还得各种百度思索

效果图

在这里插入图片描述

代码

1、HTML部分

<template>
    <div>
        <div class="title">
            <div class="title_cn">圣诞快乐</div>
            <div class="title_en">~~Merry Christmas~~</div>
        </div>
        <div class="tree">
            <ul v-for="(chunk, cIndex) in tree" :key="cIndex" class="chunk">
                <li
                    v-for="line in chunk"
                    class="line"
                    :style="{'--w': line}"
                ></li>
                <template v-for="flower in flowers[cIndex]">
                    <!--直接去阿里巴巴矢量库里找喜欢的icon, 复制svg出来用-->
                    <svg t="1703141790129" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16087" 
                    :style="{'--top': flower.top, '--left': flower.left}"
                    :width="flower.size" :height="flower.size" class="flower"
                    >
                        <path d="M510.44352 122.88a71.68 71.68 0 0 1 20.48 140.3904v66.16064l59.67872-59.67872a20.48 20.48 0 0 1 27.66848-1.19808l1.30048 1.19808a20.48 20.48 0 0 1 1.19808 27.65824l-1.19808 1.31072-86.8864 86.8864a20.69504 20.69504 0 0 1-1.75104 1.55648v14.04928a112.5376 112.5376 0 0 1 65.19808 37.66272l12.17536-7.03488c0.11264-0.768 0.27648-1.536 0.48128-2.29376l31.7952-118.69184a20.48 20.48 0 0 1 39.56736 10.5984l-21.84192 81.5104 57.2928-33.0752a71.68 71.68 0 1 1 20.48 35.4816l-57.2928 33.0752 81.53088 21.85216a20.48 20.48 0 0 1 14.85824 23.35744l-0.37888 1.73056a20.48 20.48 0 0 1-23.35744 14.85824l-1.73056-0.37888-118.6816-31.80544a20.69504 20.69504 0 0 1-2.23232-0.72704l-12.16512 7.0144c4.17792 11.776 6.4512 24.45312 6.4512 37.65248 0 13.2096-2.27328 25.87648-6.4512 37.65248l12.16512 7.0144c0.7168-0.27648 1.46432-0.52224 2.22208-0.72704l118.69184-31.80544a20.48 20.48 0 1 1 10.60864 39.56736l-81.52064 21.84192 57.2928 33.0752a71.68 71.68 0 1 1-20.48 35.4816l-57.2928-33.08544 21.83168 81.53088a20.48 20.48 0 0 1-12.8 24.55552l-1.67936 0.53248a20.48 20.48 0 0 1-24.55552-12.8l-0.53248-1.6896-31.7952-118.6816a20.69504 20.69504 0 0 1-0.48128-2.304l-12.1856-7.03488a112.5376 112.5376 0 0 1-65.19808 37.66272v14.04928c0.6144 0.48128 1.19808 1.00352 1.76128 1.55648l86.8864 86.8864a20.48 20.48 0 1 1-28.96896 28.96896l-59.66848-59.67872v66.16064a71.68 71.68 0 1 1-40.96 0v-66.16064l-59.6992 59.67872a20.48 20.48 0 0 1-27.648 1.19808l-1.31072-1.19808a20.48 20.48 0 0 1-1.19808-27.65824l1.19808-1.31072 86.8864-86.8864c0.5632-0.55296 1.14688-1.0752 1.75104-1.55648v-14.05952a112.5376 112.5376 0 0 1-65.19808-37.65248l-12.1856 7.03488c-0.1024 0.768-0.26624 1.536-0.47104 2.29376l-31.80544 118.69184a20.48 20.48 0 0 1-39.55712-10.5984l21.84192-81.5104-57.30304 33.0752a71.68 71.68 0 1 1-20.48-35.4816l57.30304-33.0752-81.53088-21.85216a20.48 20.48 0 0 1-14.85824-23.35744l0.37888-1.73056a20.48 20.48 0 0 1 23.35744-14.85824l1.73056 0.37888 118.6816 31.80544c0.768 0.2048 1.51552 0.45056 2.23232 0.72704l12.15488-7.0144A112.45568 112.45568 0 0 1 397.80352 512c0-13.2096 2.27328-25.87648 6.4512-37.65248l-12.16512-7.0144c-0.7168 0.27648-1.46432 0.52224-2.22208 0.72704l-118.69184 31.80544a20.48 20.48 0 1 1-10.60864-39.56736l81.52064-21.84192-57.2928-33.0752a71.68 71.68 0 1 1 20.48-35.4816l57.2928 33.08544-21.83168-81.53088a20.48 20.48 0 0 1 12.8-24.55552l1.67936-0.53248a20.48 20.48 0 0 1 24.55552 12.8l0.52224 1.6896 31.80544 118.6816c0.2048 0.768 0.36864 1.536 0.48128 2.304l12.1856 7.03488a112.5376 112.5376 0 0 1 65.18784-37.65248v-14.05952a20.69504 20.69504 0 0 1-1.7408-1.55648l-86.89664-86.8864a20.48 20.48 0 1 1 28.96896-28.96896l59.66848 59.67872V263.2704a71.68 71.68 0 0 1 20.48-140.3904z" 
                            :fill="flower.color" p-id="16088">
                        </path>
                    </svg>
                </template>
            </ul>
            <div class="trunk"></div>
        </div>
    </div>
</template>

2、JS部分

<script>
//点缀花朵的颜色库
const COLORS = [ "#EB455F", "#BB3E39", "#FFAF58", "#FFF4E0","#F4D348", "#E388B1", "#FF5B00", "#9A0500" ];
export default {
    name: "merry-christmas",
    data() {
        return {
            tree: [//总共4层（4个一维数组）,每个数字代表“line长条”的长度
                [1, 4, 7, 10], //第一层
                [6, 9, 13, 16], //第二层
                [8, 11, 14, 17, 20], //第三层
                [10, 14, 17, 21, 25], //第四层
            ],
            flowers: [//圣诞树上点缀花朵集合，也是总共4个一维数组, 配置花朵大小、颜色、位置
                [//第一层，color颜色当前为默认值，实际要在COLORS中随机分配一个颜色
                    { size: 18, color: "#EB455F", top: "10%", left: "45%" },
                    { size: 15, color: "#EB455F", top: "60%", left: "60%" },
                    { size: 15, color: "#EB455F", top: "70%", left: "20%" },
                ],
                [//第二层
                    { size: 15, color: "#EB455F", top: "20%", left: "50%" },
                    { size: 19, color: "#EB455F", top: "50%", left: "15%" },
                    { size: 15, color: "#EB455F", top: "70%", left: "75%" },
                ],
                [//第三层
                    { size: 18, color: "#EB455F", top: "20%", left: "55%" },
                    { size: 18, color: "#EB455F", top: "70%", left: "85%" },
                    { size: 20, color: "#EB455F", top: "40%", left: "15%" },
                ],
                 [//第四层
                    { size: 14, color: "#EB455F", top: "0%", left: "55%" },
                    { size: 18, color: "#EB455F", top: "25%", left: "30%" },
                    { size: 18, color: "#EB455F", top: "65%", left: "85%" },
                    { size: 22, color: "#EB455F", top: "70%", left: "17%" },
                ]
            ],
        }
    },
    created() {
        this.getRandomColor();
    },
    methods: {
        getRandomColor() {
            this.flowers = this.flowers.map(items => {
                //随机抽取颜色
                //思路：先打乱COLORS的顺序，再截取（slice）打乱后集合前面items.length的颜色集合
                let colors = COLORS.sort(() => Math.random() - 0.5).slice(0, items.length);
                items.forEach((item, index) => {
                    item.color = colors[index];//给flowers集合里的color赋予新的随机颜色值
                })
                return items;
            });
            
        }
    }
}
</script>

3、CSS部分

<style scoped>
.title {
    text-align: center;
    margin: 50px auto 40px;
    color: #795548;
    font-family: sans-serif;
}
.title > .title_cn {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 1px 1px 4px #FFF4E0, -2px 4px 5px darkgreen, 0 6px 15px #C51717;
}
.title > .title_en {
    font-style: italic;
    text-shadow: -2px 4px 5px darkgreen, 0 6px 15px #C51717;
    font-size: 26px;
    margin-top: 5px;
}


.tree {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.tree .line {
    height: 15px;
    width: calc(10px + var(--w) * 10px);
    margin: 0 auto;
    border-radius: 5px;
    background-color: darkgreen;
    box-shadow: 10px 10px 20px 0 rgba(31, 71, 0, 0.51);
}

.chunk {
    position: relative;
}
.chunk > li:nth-child(1) {
    background-color: #268B4C;
}
.chunk > li:nth-child(2) {
    background-color: #32776A;
}
.chunk > li:nth-child(3) {
    background-color: #2d6359;
}

.trunk {
    width: 22px;
    height: 44px;
    background-color: #795548;
    box-shadow: 10px 10px 20px 0 rgba(31, 71, 0, 0.51);
}

.flower {
    position: absolute;
    z-index: 1;
    top: var(--top, 70%);
    left: var(--left, 50%);
}

</style>