App下載

CSS手繪圣誕老人教程 - 創(chuàng)造節(jié)日氣氛的網(wǎng)頁設(shè)計技巧（附源碼）

焰火燦爛時 2024-12-09 18:49:58 瀏覽數(shù) (357)
反饋

在這篇文章中，我們將學(xué)習(xí)如何使用CSS來手繪一個圣誕老人的卡通形象。這不僅是一個有趣的練習(xí)，也是提升你CSS技能的好機(jī)會。通過本教程，你將學(xué)會如何使用CSS變量、偽元素、動畫和媒體查詢來創(chuàng)建一個生動的圣誕老人形象。如果你對CSS還不夠熟悉，不妨先瀏覽一下編程獅上的相關(guān)課程，這將為你打下堅實的基礎(chǔ)。

效果圖： CSS繪制圣誕老人

準(zhǔn)備工作

在開始之前，請確保你有一個現(xiàn)代瀏覽器和一個代碼編輯器。你可以直接在瀏覽器的開發(fā)者工具中嘗試這些代碼，或者創(chuàng)建一個HTML文件來保存你的代碼。推薦使用免費AI編程助手——豆包 MarsCode，能大大提升我們的開發(fā)效率。

豆包MarsCode在線版操作截圖

HTML結(jié)構(gòu)

首先，我們需要創(chuàng)建一個HTML結(jié)構(gòu)來作為圣誕老人形象的基礎(chǔ)。我們將使用一個div元素作為畫布，然后在這個畫布中添加圣誕老人的各個部分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS手繪圣誕老人 - 編程獅(w3cschool.cn)</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="canvas" role="img" aria-label="一個站在雪地小山上的圣誕老人卡通形象。">
        <!-- 圣誕老人的各個部分 -->
        <div class="hand"></div><!-- 左手 -->
        <div class="hand"></div><!-- 右手 -->
        <div class="arms"></div><!-- 手臂 -->
        <div class="leg"></div> <!-- 左腿 -->
        <div class="leg"></div> <!-- 右腿 -->
        <div class="body"> <!-- 圣誕老人的身體 -->
            <div class="belt"></div> <!-- 圣誕老人的腰帶 -->
        </div>
        <div class="beard"></div> <!-- 圣誕老人的胡子 -->
        <div class="head"> <!-- 圣誕老人的頭部 -->
            <div class="cheek"></div><!-- 左臉頰 -->
            <div class="cheek"></div> <!-- 右臉頰 -->
            <div class="eye"></div> <!-- 左眼 -->
            <div class="eye"></div> <!-- 右眼 -->
            <div class="mustache"></div> <!-- 左小胡子 -->
            <div class="mustache"></div><!-- 右小胡子 -->
            <div class="hat"></div> <!-- 圣誕老人的帽子 -->
        </div>
    </div>
</body>
</html>

CSS樣式

接下來，我們將使用CSS來定義圣誕老人的形象。我們將使用CSS變量來定義顏色，這使得我們能夠輕松地更改顏色而不需要修改多個屬性。

:root {
    --skin: PeachPuff;
    /* 圣誕老人皮膚顏色 */
    --eyes: Black;
    /* 圣誕老人眼睛顏色 */
    --cheeks: Salmon;
    /* 圣誕老人臉頰顏色 */
    --beard: GhostWhite;
    /* 圣誕老人胡子顏色 */
    --mustache: white;
    /* 圣誕老人小胡子顏色 */
    --suit: Tomato;
    /* 圣誕老人衣服顏色 */
    --belt: #363636;
    /* 圣誕老人腰帶顏色 */
    --belt-buckle: gold;
    /* 圣誕老人腰帶扣顏色 */
}

全局樣式

我們設(shè)置背景為天藍(lán)色，并添加雪花效果，以營造圣誕氛圍。

body {
    background: SkyBlue;
    /* 背景顏色為天藍(lán)色 */
    overflow: hidden;
    /* 隱藏溢出的內(nèi)容 */
    background-image: radial-gradient(circle at 50% 50%, white 2.5%, transparent 0), radial-gradient(circle at 30% 90%, white 1.5%, transparent 0), radial-gradient(circle at 70% 10%, white 1%, transparent 0), radial-gradient(circle at 10% 40%, white 1%, transparent 0);
    /* 添加雪花背景效果 */
    background-size: 45vmin 35vmin, 50vmin 70vmin, 60vmin 50vmin, 65vmin 60vmin;
    /* 設(shè)置背景圖像大小 */
    background-position: 0 0;
    /* 設(shè)置背景圖像位置 */
    animation: snow infinite 7s linear;
    /* 添加雪花飄落動畫 */
}

畫布樣式

我們將畫布居中，并設(shè)置其大小和寬高比。

.canvas {
    width: 60vmin;
    /* 設(shè)置畫布寬度 */
    aspect-ratio: 1;
    /* 設(shè)置畫布寬高比為1:1 */
    position: absolute;
    /* 絕對定位 */
    top: 50%;
    /* 距離頂部50% */
    left: 50%;
    /* 距離左側(cè)50% */
    transform: translate(-50%, -50%);
    /* 將畫布居中 */
}
.canvas::before {
    content: "";
    /* 偽元素內(nèi)容為空 */
    display: block;
    /* 顯示為塊級元素 */
    position: absolute;
    /* 絕對定位 */
    top: 90%;
    /* 距離頂部90% */
    left: 50%;
    /* 距離左側(cè)50% */
    width: 200vmax;
    /* 設(shè)置寬度 */
    height: 200vmax;
    /* 設(shè)置高度 */
    background: white;
    /* 背景顏色為白色 */
    transform: translate(-50%, 0) rotate(1deg);
    /* 將偽元素居中并旋轉(zhuǎn)1度 */
    border-radius: 100% / 20%;
    /* 設(shè)置橢圓形邊框 */
}

圣誕老人形象

我們將使用多個div元素來構(gòu)建圣誕老人的各個部分，包括頭部、眼睛、臉頰、胡子、帽子、身體、腰帶、手臂、手和腿。

/* 圣誕老人頭部樣式 */
.head {
    --positionX: 27%;
    /* 定義眼睛和臉頰的水平位置 */
    --positionY: 63%;
    /* 定義眼睛和臉頰的垂直位置 */
    position: absolute;
    /* 絕對定位 */
    top: 10%;
    /* 距離頂部10% */
    left: 50%;
    /* 距離左側(cè)50% */
    border-radius: 50%;
    /* 設(shè)置圓形邊框 */
    width: 25%;
    /* 設(shè)置寬度 */
    height: 25%;
    /* 設(shè)置高度 */
    transform: translate(-50%, 0);
    /* 將頭部居中 */
    background: var(--skin);
    /* 設(shè)置背景顏色為皮膚色 */
        }


.eye {
    position: absolute;
    /* 絕對定位 */
    top: var(--positionY);
    /* 使用定義的垂直位置 */
    left: var(--positionX);
    /* 使用定義的水平位置 */
    width: 12%;
    /* 設(shè)置寬度 */
    height: 12%;
    /* 設(shè)置高度 */
    background: var(--eyes);
    /* 設(shè)置背景顏色為黑色 */
    border-radius: 50%;
    /* 設(shè)置圓形邊框 */
    animation: blink 5s infinite linear;
    /* 添加眨眼動畫 */
        }


.eye+.eye {
    left: auto;
    /* 取消之前的left屬性 */
    right: var(--positionX);
    /* 設(shè)置右側(cè)眼睛的位置 */
        }


.cheek {
    position: absolute;
    /* 絕對定位 */
    top: calc(var(--positionY) + 7%);
    /* 計算臉頰的垂直位置 */
    left: calc(var(--positionX) - 12%);
    /* 計算臉頰的水平位置 */
    width: 20%;
    /* 設(shè)置寬度 */
    height: 12%;
    /* 設(shè)置高度 */
    background: var(--cheeks);
    /* 設(shè)置背景顏色為臉頰色 */
    border-radius: 50%;
    /* 設(shè)置圓形邊框 */
        }


.cheek+.cheek {
    left: auto;
    /* 取消之前的left屬性 */
    right: calc(var(--positionX) - 12%);
    /* 設(shè)置右側(cè)臉頰的位置 */
        }


        /* 圣誕老人胡須和小胡子樣式 */
.beard {
    position: absolute;
    /* 絕對定位 */
    top: 10%;
    /* 距離頂部10% */
    left: 50%;
    /* 距離左側(cè)50% */
    width: 30%;
    /* 設(shè)置寬度 */
    height: 40%;
    /* 設(shè)置高度 */
    background: var(--beard);
    /* 設(shè)置背景顏色為胡子色 */
    transform: translate(-50%, 0);
    /* 將胡須居中 */
    border-radius: 100% / 120% 120% 80% 80%;
    /* 設(shè)置不規(guī)則形狀的邊框 */
        }


.mustache {
    position: absolute;
    /* 絕對定位 */
    top: 88%;
    /* 距離頂部88% */
    left: 52%;
    /* 距離左側(cè)52% */
    width: 40%;
    /* 設(shè)置寬度 */
    height: 40%;
    /* 設(shè)置高度 */
    background: var(--mustache);
    /* 設(shè)置背景顏色為小胡子色 */
    border-radius: 100% 10% 100% 0;
    /* 設(shè)置不規(guī)則形狀的邊框 */
    transform-origin: top right;
    /* 設(shè)置變換原點 */
    transform: translate(-100%, 0) rotate(25deg);
    /* 將小胡子向左旋轉(zhuǎn)25度 */
    animation: moveMustache 7s infinite linear;
    /* 添加小胡子移動動畫 */
        }


.mustache+.mustache {
    left: 48%;
    /* 設(shè)置左側(cè)小胡子的位置 */
    border-radius: 10% 100% 0 100%;
    /* 設(shè)置不規(guī)則形狀的邊框 */
    transform-origin: top left;
    /* 設(shè)置變換原點 */
    transform: rotate(-25deg);
    /* 將小胡子向右旋轉(zhuǎn)25度 */
    animation: moveMustache2 7s infinite linear;
    /* 添加小胡子移動動畫 */
        }


        /* 圣誕老人帽子樣式 */
.hat {
    position: absolute;
    /* 絕對定位 */
    width: 98%;
    /* 設(shè)置寬度 */
    height: 80%;
    /* 設(shè)置高度 */
    background: var(--suit);
    /* 設(shè)置背景顏色為衣服色 */
    border-radius: 100% 20% 0 0;
    /* 設(shè)置不規(guī)則形狀的邊框 */
    top: -40%;
    /* 距離頂部-40% */
    left: 50%;
    /* 距離左側(cè)50% */
    transform: translate(-50%, 0) rotate(1deg);
    /* 將帽子居中并旋轉(zhuǎn)1度 */
        }


.hat::before {
    content: "";
    /* 偽元素內(nèi)容為空 */
    display: block;
    /* 顯示為塊級元素 */
    position: absolute;
    /* 絕對定位 */
    bottom: -17%;
    /* 距離底部-17% */
    left: -5%;
    /* 距離左側(cè)-5% */
    width: 110%;
    /* 設(shè)置寬度 */
    height: 40%;
    /* 設(shè)置高度 */
    border-radius: 100% / 50%;
    /* 設(shè)置橢圓形邊框 */
    transform: rotate(-2deg);
    /* 旋轉(zhuǎn)-2度 */
    background: radial-gradient(200% 100% at 50% 100%, #0000 30%, var(--mustache) 31%);
    /* 設(shè)置徑向漸變背景 */
        }


.hat::after {
    content: "";
    /* 偽元素內(nèi)容為空 */
    display: block;
    /* 顯示為塊級元素 */
    position: absolute;
    /* 絕對定位 */
    right: -25%;
    /* 距離右側(cè)-25% */
    top: -15%;
    /* 距離頂部-15% */
    width: 40%;
    /* 設(shè)置寬度 */
    aspect-ratio: 1;
    /* 設(shè)置寬高比為1:1 */
    border-radius: 50%;
    /* 設(shè)置圓形邊框 */
    background: var(--beard);
    /* 設(shè)置背景顏色為胡子色 */
        }


        /* 圣誕老人身體樣式 */
.body {
    position: absolute;
    /* 絕對定位 */
    top: 35%;
    /* 距離頂部35% */
    left: 50%;
    /* 距離左側(cè)50% */
    width: 50%;
    /* 設(shè)置寬度 */
    height: 50%;
    /* 設(shè)置高度 */
    background: var(--suit);
    /* 設(shè)置背景顏色為衣服色 */
    border-radius: 100% / 150% 150% 25% 25%;
    /* 設(shè)置不規(guī)則形狀的邊框 */
    transform: translate(-50%, 0);
    /* 將身體居中 */
    background-image: radial-gradient(circle at 50% 36%, var(--belt) 2.75%, #0000 3%), radial-gradient(circle at 50% 48%, var(--belt) 3%, #0000 3.25%), radial-gradient(circle at 50% 60%, var(--belt) 2.75%, #0000 3%), radial-gradient(circle at 50% 90%, var(--belt) 2.25%, #0000 2.5%), radial-gradient(circle at 50% -50%, transparent 75%, var(--belt) 75.1% 83%, transparent 83.1%), linear-gradient(to right, transparent 42%, white 42.2% 57%, transparent 57.2%);
    /* 設(shè)置徑向漸變背景和線性漸變背景 */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 51% 100%, 50% 96%, 49% 100%, 0% 100%);
    /* 設(shè)置裁剪路徑 */
        }


.belt {
    position: absolute;
    /* 絕對定位 */
    top: 75%;
    /* 距離頂部75% */
    left: 50%;
    /* 距離左側(cè)50% */
    transform: translate(-50%, -50%);
    /* 將腰帶居中 */
    width: 23%;
    /* 設(shè)置寬度 */
    height: 15%;
    /* 設(shè)置高度 */
    background: linear-gradient(var(--belt-buckle) 0 0) 75% 50% / 25% 12% no-repeat, linear-gradient(var(--belt) 0 0) 50% 50% / 85% 80% no-repeat, var(--belt-buckle);
    /* 設(shè)置背景圖像和背景顏色 */
        }


        /* 圣誕老人手臂樣式 */
.arms {
    position: absolute;
    /* 絕對定位 */
    top: 37%;
    /* 距離頂部37% */
    left: 50%;
    /* 距離左側(cè)50% */
    transform: translate(-50%, 0);
    /* 將手臂居中 */
    width: 65%;
    /* 設(shè)置寬度 */
    height: 40%;
    /* 設(shè)置高度 */
    background: OrangeRed;
    /* 設(shè)置背景顏色為橙紅色 */
    border-radius: 100% / 170% 170% 25% 25%;
    /* 設(shè)置不規(guī)則形狀的邊框 */
    background-image: linear-gradient(transparent 20%, #0003);
    /* 設(shè)置線性漸變背景 */
}


.hand {
    --positionX: 18%;
    /* 定義手的水平位置 */
    position: absolute;
    /* 絕對定位 */
    top: 70%;
    /* 距離頂部70% */
    left: var(--positionX);
    /* 使用定義的水平位置 */
    width: 13%;
    /* 設(shè)置寬度 */
    height: 13%;
    /* 設(shè)置高度 */
    background: var(--belt);
    /* 設(shè)置背景顏色為腰帶色 */
    border-radius: 50%;
    /* 設(shè)置圓形邊框 */
}


.hand+.hand {
    left: auto;
    /* 取消之前的left屬性 */
    right: var(--positionX);
    /* 設(shè)置右側(cè)手的位置 */
}


/* 圣誕老人腿部樣式 */
.leg {
    position: absolute;
    /* 絕對定位 */
    top: 75%;
    /* 距離頂部75% */
    left: 29%;
    /* 距離左側(cè)29% */
    width: 19%;
    /* 設(shè)置寬度 */
    height: 25%;
    /* 設(shè)置高度 */
    background: var(--suit);
    /* 設(shè)置背景顏色為衣服色 */
    transform: skew(2deg);
    /* 斜切變形 */
    background-image: linear-gradient(#0002, transparent 70%, var(--belt) 0);
    /* 設(shè)置線性漸變背景 */
}


.leg+.leg {
    left: 52%;
    /* 設(shè)置右側(cè)腿的位置 */
}


.leg::after {
    content: "";
    /* 偽元素內(nèi)容為空 */
    display: block;
    /* 顯示為塊級元素 */
    position: absolute;
    /* 絕對定位 */
    bottom: 0;
    /* 距離底部0 */
    left: -6%;
    /* 距離左側(cè)-6% */
    width: 110%;
    /* 設(shè)置寬度 */
    height: 20%;
    /* 設(shè)置高度 */
    background: black;
    /* 設(shè)置背景顏色為黑色 */
    border-radius: 50% / 100% 100% 0 0;
    /* 設(shè)置橢圓形邊框 */
}

        
.leg+.leg::after {
    left: -4%;
    /* 設(shè)置右側(cè)腿腳的位置 */
}

動畫效果

為了讓圣誕老人更加生動，我們添加了一些動畫效果，如眨眼和胡子的微動。

/* 動畫關(guān)鍵幀 */
/* 動畫關(guān)鍵幀 */
@keyframes snow {
0% {
background-position: 0 0, 0 0, 0 0, 0 0;
/* 設(shè)置初始背景位置 */
}


40% {
background-position: 10px 14vmin, -20px 28vmin, 20px 20vmin, 10px 24vmin;
/* 設(shè)置40%時的背景位置 */
}


60% {
background-position: -10px 21vmin, -30px 42vmin, 30px 30vmin, 15px 36vmin;
/* 設(shè)置60%時的背景位置 */
}


100% {
background-position: 0 35vmin, 0 70vmin, 0 50vmin, 0 60vmin;
/* 設(shè)置100%時的背景位置 */
}
}


@keyframes blink {


0%,
6%,
100% {
height: 12%;
/* 設(shè)置眼睛的高度 */
}


3% {
height: 0%;
/* 設(shè)置眼睛的高度為0，模擬眨眼 */
}
}


@keyframes moveMustache {


0%,
40%,
44%,
100% {
transform: translate(-100%, 0) rotate(25deg);
/* 設(shè)置小胡子的初始和結(jié)束狀態(tài) */
}


42% {
transform: translate(-100%, 0) rotate(30deg);
/* 設(shè)置小胡子的中間狀態(tài) */
}
}


/* 定義名為 moveMustache2 的關(guān)鍵幀動畫 */
@keyframes moveMustache2 {


/* 在 0%, 40%, 44%, 和 100% 的時間點上，將小胡子旋轉(zhuǎn) -25 度 */
0%,
40%,
44%,
100% {
transform: rotate(-25deg);
}


/* 在 42% 的時間點上，將小胡子旋轉(zhuǎn) -30 度 */
42% {
transform: rotate(-30deg);
}
}

媒體查詢

為了適配偏好減少動畫的用戶，我們使用媒體查詢來取消動畫效果。

/* 媒體查詢，適配偏好減少動畫的用戶 */
@media (prefers-reduced-motion) {


/* 如果用戶偏好減少動畫，則取消所有元素的動畫效果 */
* {
animation: none !important;
}
}

最后看下完整代碼

<!DOCTYPE html>
<html lang="zh-CN">
<!-- 設(shè)置文檔的語言為中文 -->


<head>
    <meta charset="UTF-8">
    <!-- 設(shè)置字符編碼為UTF-8，確保支持多種字符 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 設(shè)置視口，使頁面適應(yīng)不同設(shè)備的屏幕 -->
    <title>CSS手繪圣誕老人 - 編程獅(w3cschool.cn)</title>
    <!-- 設(shè)置網(wǎng)頁標(biāo)題 -->
    <style>
        /* 定義顏色變量 */
        :root {
            --skin: PeachPuff;
            /* 圣誕老人皮膚顏色 */
            --eyes: Black;
            /* 圣誕老人眼睛顏色 */
            --cheeks: Salmon;
            /* 圣誕老人臉頰顏色 */
            --beard: GhostWhite;
            /* 圣誕老人胡子顏色 */
            --mustache: white;
            /* 圣誕老人小胡子顏色 */
            --suit: Tomato;
            /* 圣誕老人衣服顏色 */
            --belt: #363636;
            /* 圣誕老人腰帶顏色 */
            --belt-buckle: gold;
            /* 圣誕老人腰帶扣顏色 */
        }


        /* 全局樣式 */
        body {
            background: SkyBlue;
            /* 背景顏色為天藍(lán)色 */
            overflow: hidden;
            /* 隱藏溢出的內(nèi)容 */
            background-image: radial-gradient(circle at 50% 50%, white 2.5%, transparent 0), radial-gradient(circle at 30% 90%, white 1.5%, transparent 0), radial-gradient(circle at 70% 10%, white 1%, transparent 0), radial-gradient(circle at 10% 40%, white 1%, transparent 0);
            /* 添加雪花背景效果 */
            background-size: 45vmin 35vmin, 50vmin 70vmin, 60vmin 50vmin, 65vmin 60vmin;
            /* 設(shè)置背景圖像大小 */
            background-position: 0 0;
            /* 設(shè)置背景圖像位置 */
            animation: snow infinite 7s linear;
            /* 添加雪花飄落動畫 */
        }


        /* 畫布樣式 */
        .canvas {
            width: 60vmin;
            /* 設(shè)置畫布寬度 */
            aspect-ratio: 1;
            /* 設(shè)置畫布寬高比為1:1 */
            position: absolute;
            /* 絕對定位 */
            top: 50%;
            /* 距離頂部50% */
            left: 50%;
            /* 距離左側(cè)50% */
            transform: translate(-50%, -50%);
            /* 將畫布居中 */
        }


        .canvas::before {
            content: "";
            /* 偽元素內(nèi)容為空 */
            display: block;
            /* 顯示為塊級元素 */
            position: absolute;
            /* 絕對定位 */
            top: 90%;
            /* 距離頂部90% */
            left: 50%;
            /* 距離左側(cè)50% */
            width: 200vmax;
            /* 設(shè)置寬度 */
            height: 200vmax;
            /* 設(shè)置高度 */
            background: white;
            /* 背景顏色為白色 */
            transform: translate(-50%, 0) rotate(1deg);
            /* 將偽元素居中并旋轉(zhuǎn)1度 */
            border-radius: 100% / 20%;
            /* 設(shè)置橢圓形邊框 */
        }


        /* 圣誕老人頭部樣式 */
        .head {
            --positionX: 27%;
            /* 定義眼睛和臉頰的水平位置 */
            --positionY: 63%;
            /* 定義眼睛和臉頰的垂直位置 */
            position: absolute;
            /* 絕對定位 */
            top: 10%;
            /* 距離頂部10% */
            left: 50%;
            /* 距離左側(cè)50% */
            border-radius: 50%;
            /* 設(shè)置圓形邊框 */
            width: 25%;
            /* 設(shè)置寬度 */
            height: 25%;
            /* 設(shè)置高度 */
            transform: translate(-50%, 0);
            /* 將頭部居中 */
            background: var(--skin);
            /* 設(shè)置背景顏色為皮膚色 */
        }


        .eye {
            position: absolute;
            /* 絕對定位 */
            top: var(--positionY);
            /* 使用定義的垂直位置 */
            left: var(--positionX);
            /* 使用定義的水平位置 */
            width: 12%;
            /* 設(shè)置寬度 */
            height: 12%;
            /* 設(shè)置高度 */
            background: var(--eyes);
            /* 設(shè)置背景顏色為黑色 */
            border-radius: 50%;
            /* 設(shè)置圓形邊框 */
            animation: blink 5s infinite linear;
            /* 添加眨眼動畫 */
        }


        .eye+.eye {
            left: auto;
            /* 取消之前的left屬性 */
            right: var(--positionX);
            /* 設(shè)置右側(cè)眼睛的位置 */
        }


        .cheek {
            position: absolute;
            /* 絕對定位 */
            top: calc(var(--positionY) + 7%);
            /* 計算臉頰的垂直位置 */
            left: calc(var(--positionX) - 12%);
            /* 計算臉頰的水平位置 */
            width: 20%;
            /* 設(shè)置寬度 */
            height: 12%;
            /* 設(shè)置高度 */
            background: var(--cheeks);
            /* 設(shè)置背景顏色為臉頰色 */
            border-radius: 50%;
            /* 設(shè)置圓形邊框 */
        }


        .cheek+.cheek {
            left: auto;
            /* 取消之前的left屬性 */
            right: calc(var(--positionX) - 12%);
            /* 設(shè)置右側(cè)臉頰的位置 */
        }


        /* 圣誕老人胡須和小胡子樣式 */
        .beard {
            position: absolute;
            /* 絕對定位 */
            top: 10%;
            /* 距離頂部10% */
            left: 50%;
            /* 距離左側(cè)50% */
            width: 30%;
            /* 設(shè)置寬度 */
            height: 40%;
            /* 設(shè)置高度 */
            background: var(--beard);
            /* 設(shè)置背景顏色為胡子色 */
            transform: translate(-50%, 0);
            /* 將胡須居中 */
            border-radius: 100% / 120% 120% 80% 80%;
            /* 設(shè)置不規(guī)則形狀的邊框 */
        }


        .mustache {
            position: absolute;
            /* 絕對定位 */
            top: 88%;
            /* 距離頂部88% */
            left: 52%;
            /* 距離左側(cè)52% */
            width: 40%;
            /* 設(shè)置寬度 */
            height: 40%;
            /* 設(shè)置高度 */
            background: var(--mustache);
            /* 設(shè)置背景顏色為小胡子色 */
            border-radius: 100% 10% 100% 0;
            /* 設(shè)置不規(guī)則形狀的邊框 */
            transform-origin: top right;
            /* 設(shè)置變換原點 */
            transform: translate(-100%, 0) rotate(25deg);
            /* 將小胡子向左旋轉(zhuǎn)25度 */
            animation: moveMustache 7s infinite linear;
            /* 添加小胡子移動動畫 */
        }


        .mustache+.mustache {
            left: 48%;
            /* 設(shè)置左側(cè)小胡子的位置 */
            border-radius: 10% 100% 0 100%;
            /* 設(shè)置不規(guī)則形狀的邊框 */
            transform-origin: top left;
            /* 設(shè)置變換原點 */
            transform: rotate(-25deg);
            /* 將小胡子向右旋轉(zhuǎn)25度 */
            animation: moveMustache2 7s infinite linear;
            /* 添加小胡子移動動畫 */
        }


        /* 圣誕老人帽子樣式 */
        .hat {
            position: absolute;
            /* 絕對定位 */
            width: 98%;
            /* 設(shè)置寬度 */
            height: 80%;
            /* 設(shè)置高度 */
            background: var(--suit);
            /* 設(shè)置背景顏色為衣服色 */
            border-radius: 100% 20% 0 0;
            /* 設(shè)置不規(guī)則形狀的邊框 */
            top: -40%;
            /* 距離頂部-40% */
            left: 50%;
            /* 距離左側(cè)50% */
            transform: translate(-50%, 0) rotate(1deg);
            /* 將帽子居中并旋轉(zhuǎn)1度 */
        }


        .hat::before {
            content: "";
            /* 偽元素內(nèi)容為空 */
            display: block;
            /* 顯示為塊級元素 */
            position: absolute;
            /* 絕對定位 */
            bottom: -17%;
            /* 距離底部-17% */
            left: -5%;
            /* 距離左側(cè)-5% */
            width: 110%;
            /* 設(shè)置寬度 */
            height: 40%;
            /* 設(shè)置高度 */
            border-radius: 100% / 50%;
            /* 設(shè)置橢圓形邊框 */
            transform: rotate(-2deg);
            /* 旋轉(zhuǎn)-2度 */
            background: radial-gradient(200% 100% at 50% 100%, #0000 30%, var(--mustache) 31%);
            /* 設(shè)置徑向漸變背景 */
        }


        .hat::after {
            content: "";
            /* 偽元素內(nèi)容為空 */
            display: block;
            /* 顯示為塊級元素 */
            position: absolute;
            /* 絕對定位 */
            right: -25%;
            /* 距離右側(cè)-25% */
            top: -15%;
            /* 距離頂部-15% */
            width: 40%;
            /* 設(shè)置寬度 */
            aspect-ratio: 1;
            /* 設(shè)置寬高比為1:1 */
            border-radius: 50%;
            /* 設(shè)置圓形邊框 */
            background: var(--beard);
            /* 設(shè)置背景顏色為胡子色 */
        }


        /* 圣誕老人身體樣式 */
        .body {
            position: absolute;
            /* 絕對定位 */
            top: 35%;
            /* 距離頂部35% */
            left: 50%;
            /* 距離左側(cè)50% */
            width: 50%;
            /* 設(shè)置寬度 */
            height: 50%;
            /* 設(shè)置高度 */
            background: var(--suit);
            /* 設(shè)置背景顏色為衣服色 */
            border-radius: 100% / 150% 150% 25% 25%;
            /* 設(shè)置不規(guī)則形狀的邊框 */
            transform: translate(-50%, 0);
            /* 將身體居中 */
            background-image: radial-gradient(circle at 50% 36%, var(--belt) 2.75%, #0000 3%), radial-gradient(circle at 50% 48%, var(--belt) 3%, #0000 3.25%), radial-gradient(circle at 50% 60%, var(--belt) 2.75%, #0000 3%), radial-gradient(circle at 50% 90%, var(--belt) 2.25%, #0000 2.5%), radial-gradient(circle at 50% -50%, transparent 75%, var(--belt) 75.1% 83%, transparent 83.1%), linear-gradient(to right, transparent 42%, white 42.2% 57%, transparent 57.2%);
            /* 設(shè)置徑向漸變背景和線性漸變背景 */
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 51% 100%, 50% 96%, 49% 100%, 0% 100%);
            /* 設(shè)置裁剪路徑 */
        }


        .belt {
            position: absolute;
            /* 絕對定位 */
            top: 75%;
            /* 距離頂部75% */
            left: 50%;
            /* 距離左側(cè)50% */
            transform: translate(-50%, -50%);
            /* 將腰帶居中 */
            width: 23%;
            /* 設(shè)置寬度 */
            height: 15%;
            /* 設(shè)置高度 */
            background: linear-gradient(var(--belt-buckle) 0 0) 75% 50% / 25% 12% no-repeat, linear-gradient(var(--belt) 0 0) 50% 50% / 85% 80% no-repeat, var(--belt-buckle);
            /* 設(shè)置背景圖像和背景顏色 */
        }


        /* 圣誕老人手臂樣式 */
        .arms {
            position: absolute;
            /* 絕對定位 */
            top: 37%;
            /* 距離頂部37% */
            left: 50%;
            /* 距離左側(cè)50% */
            transform: translate(-50%, 0);
            /* 將手臂居中 */
            width: 65%;
            /* 設(shè)置寬度 */
            height: 40%;
            /* 設(shè)置高度 */
            background: OrangeRed;
            /* 設(shè)置背景顏色為橙紅色 */
            border-radius: 100% / 170% 170% 25% 25%;
            /* 設(shè)置不規(guī)則形狀的邊框 */
            background-image: linear-gradient(transparent 20%, #0003);
            /* 設(shè)置線性漸變背景 */
        }


        .hand {
            --positionX: 18%;
            /* 定義手的水平位置 */
            position: absolute;
            /* 絕對定位 */
            top: 70%;
            /* 距離頂部70% */
            left: var(--positionX);
            /* 使用定義的水平位置 */
            width: 13%;
            /* 設(shè)置寬度 */
            height: 13%;
            /* 設(shè)置高度 */
            background: var(--belt);
            /* 設(shè)置背景顏色為腰帶色 */
            border-radius: 50%;
            /* 設(shè)置圓形邊框 */
        }


        .hand+.hand {
            left: auto;
            /* 取消之前的left屬性 */
            right: var(--positionX);
            /* 設(shè)置右側(cè)手的位置 */
        }


        /* 圣誕老人腿部樣式 */
        .leg {
            position: absolute;
            /* 絕對定位 */
            top: 75%;
            /* 距離頂部75% */
            left: 29%;
            /* 距離左側(cè)29% */
            width: 19%;
            /* 設(shè)置寬度 */
            height: 25%;
            /* 設(shè)置高度 */
            background: var(--suit);
            /* 設(shè)置背景顏色為衣服色 */
            transform: skew(2deg);
            /* 斜切變形 */
            background-image: linear-gradient(#0002, transparent 70%, var(--belt) 0);
            /* 設(shè)置線性漸變背景 */
        }


        .leg+.leg {
            left: 52%;
            /* 設(shè)置右側(cè)腿的位置 */
        }


        .leg::after {
            content: "";
            /* 偽元素內(nèi)容為空 */
            display: block;
            /* 顯示為塊級元素 */
            position: absolute;
            /* 絕對定位 */
            bottom: 0;
            /* 距離底部0 */
            left: -6%;
            /* 距離左側(cè)-6% */
            width: 110%;
            /* 設(shè)置寬度 */
            height: 20%;
            /* 設(shè)置高度 */
            background: black;
            /* 設(shè)置背景顏色為黑色 */
            border-radius: 50% / 100% 100% 0 0;
            /* 設(shè)置橢圓形邊框 */
        }


        .leg+.leg::after {
            left: -4%;
            /* 設(shè)置右側(cè)腿腳的位置 */
        }


        /* 動畫關(guān)鍵幀 */
        @keyframes snow {
            0% {
                background-position: 0 0, 0 0, 0 0, 0 0;
                /* 設(shè)置初始背景位置 */
            }


            40% {
                background-position: 10px 14vmin, -20px 28vmin, 20px 20vmin, 10px 24vmin;
                /* 設(shè)置40%時的背景位置 */
            }


            60% {
                background-position: -10px 21vmin, -30px 42vmin, 30px 30vmin, 15px 36vmin;
                /* 設(shè)置60%時的背景位置 */
            }


            100% {
                background-position: 0 35vmin, 0 70vmin, 0 50vmin, 0 60vmin;
                /* 設(shè)置100%時的背景位置 */
            }
        }


        @keyframes blink {


            0%,
            6%,
            100% {
                height: 12%;
                /* 設(shè)置眼睛的高度 */
            }


            3% {
                height: 0%;
                /* 設(shè)置眼睛的高度為0，模擬眨眼 */
            }
        }


        @keyframes moveMustache {


            0%,
            40%,
            44%,
            100% {
                transform: translate(-100%, 0) rotate(25deg);
                /* 設(shè)置小胡子的初始和結(jié)束狀態(tài) */
            }


            42% {
                transform: translate(-100%, 0) rotate(30deg);
                /* 設(shè)置小胡子的中間狀態(tài) */
            }
        }


        /* 定義名為 moveMustache2 的關(guān)鍵幀動畫 */
        @keyframes moveMustache2 {


            /* 在 0%, 40%, 44%, 和 100% 的時間點上，將小胡子旋轉(zhuǎn) -25 度 */
            0%,
            40%,
            44%,
            100% {
                transform: rotate(-25deg);
            }


            /* 在 42% 的時間點上，將小胡子旋轉(zhuǎn) -30 度 */
            42% {
                transform: rotate(-30deg);
            }
        }


        /* 媒體查詢，適配偏好減少動畫的用戶 */
        @media (prefers-reduced-motion) {


            /* 如果用戶偏好減少動畫，則取消所有元素的動畫效果 */
            * {
                animation: none !important;
            }
        }
    </style>
</head>


<body>
    <div class="canvas" role="img" aria-label="一個站在雪地小山上的圣誕老人卡通形象。">
        <!-- 創(chuàng)建一個畫布容器，包含圣誕老人的所有部分，并設(shè)置ARIA標(biāo)簽以便于輔助技術(shù) -->
        <div class="hand"></div><!-- 左手 -->
        <div class="hand"></div><!-- 右手 -->
        <div class="arms"></div><!-- 手臂 -->
        <div class="leg"></div> <!-- 左腿 -->
        <div class="leg"></div> <!-- 右腿 -->
        <div class="body"> <!-- 圣誕老人的身體 -->
            <div class="belt"></div> <!-- 圣誕老人的腰帶 -->
        </div>
        <div class="beard"></div> <!-- 圣誕老人的胡子 -->
        <div class="head"> <!-- 圣誕老人的頭部 -->
            <div class="cheek"></div><!-- 左臉頰 -->
            <div class="cheek"></div> <!-- 右臉頰 -->
            <div class="eye"></div> <!-- 左眼 -->
            <div class="eye"></div> <!-- 右眼 -->
            <div class="mustache"></div> <!-- 左小胡子 -->
            <div class="mustache"></div><!-- 右小胡子 -->
            <div class="hat"></div> <!-- 圣誕老人的帽子 -->
        </div>
    </div>
</body>


</html>

創(chuàng)建一個圣誕老人.html文件并使用編輯器打開，將以上代碼粘貼后保存，使用瀏覽器即可查看效果。

通過本教程，你不僅學(xué)會了如何使用CSS來手繪一個圣誕老人形象，還了解了如何通過CSS動畫來增強(qiáng)網(wǎng)頁的互動性。如果你想要更深入地學(xué)習(xí)CSS，編程獅(w3cschool.cn)提供了豐富的課程，包括CSS基礎(chǔ)、進(jìn)階技巧以及實戰(zhàn)項目，幫助你成為CSS高手?，F(xiàn)在就開始你的學(xué)習(xí)之旅吧，下一個圣誕節(jié)，你或許可以自己制作一個更加復(fù)雜的圣誕主題網(wǎng)頁！

HTML CSS

1 人點贊