在這篇文章中,我們將學(xué)習(xí)如何使用CSS來(lái)手繪一個(gè)圣誕老人的卡通形象。這不僅是一個(gè)有趣的練習(xí),也是提升你CSS技能的好機(jī)會(huì)。通過(guò)本教程,你將學(xué)會(huì)如何使用CSS變量、偽元素、動(dòng)畫和媒體查詢來(lái)創(chuàng)建一個(gè)生動(dòng)的圣誕老人形象。如果你對(duì)CSS還不夠熟悉,不妨先瀏覽一下編程獅上的相關(guān)課程,這將為你打下堅(jiān)實(shí)的基礎(chǔ)。
效果圖:
準(zhǔn)備工作
在開始之前,請(qǐng)確保你有一個(gè)現(xiàn)代瀏覽器和一個(gè)代碼編輯器。你可以直接在瀏覽器的開發(fā)者工具中嘗試這些代碼,或者創(chuàng)建一個(gè)HTML文件來(lái)保存你的代碼。推薦使用免費(fèi)AI編程助手——豆包 MarsCode,能大大提升我們的開發(fā)效率。
HTML結(jié)構(gòu)
首先,我們需要?jiǎng)?chuàng)建一個(gè)HTML結(jié)構(gòu)來(lái)作為圣誕老人形象的基礎(chǔ)。我們將使用一個(gè)div
元素作為畫布,然后在這個(gè)畫布中添加圣誕老人的各個(gè)部分。
<!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="一個(gè)站在雪地小山上的圣誕老人卡通形象。">
<!-- 圣誕老人的各個(gè)部分 -->
<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樣式
接下來(lái),我們將使用CSS來(lái)定義圣誕老人的形象。我們將使用CSS變量來(lái)定義顏色,這使得我們能夠輕松地更改顏色而不需要修改多個(gè)屬性。
:root {
--skin: PeachPuff;
/* 圣誕老人皮膚顏色 */
--eyes: Black;
/* 圣誕老人眼睛顏色 */
--cheeks: Salmon;
/* 圣誕老人臉頰顏色 */
--beard: GhostWhite;
/* 圣誕老人胡子顏色 */
--mustache: white;
/* 圣誕老人小胡子顏色 */
--suit: Tomato;
/* 圣誕老人衣服顏色 */
--belt: #363636;
/* 圣誕老人腰帶顏色 */
--belt-buckle: gold;
/* 圣誕老人腰帶扣顏色 */
}
全局樣式
我們?cè)O(shè)置背景為天藍(lán)色,并添加雪花效果,以營(yíng)造圣誕氛圍。
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;
/* 添加雪花飄落動(dòng)畫 */
}
畫布樣式
我們將畫布居中,并設(shè)置其大小和寬高比。
.canvas {
width: 60vmin;
/* 設(shè)置畫布寬度 */
aspect-ratio: 1;
/* 設(shè)置畫布寬高比為1:1 */
position: absolute;
/* 絕對(duì)定位 */
top: 50%;
/* 距離頂部50% */
left: 50%;
/* 距離左側(cè)50% */
transform: translate(-50%, -50%);
/* 將畫布居中 */
}
.canvas::before {
content: "";
/* 偽元素內(nèi)容為空 */
display: block;
/* 顯示為塊級(jí)元素 */
position: absolute;
/* 絕對(duì)定位 */
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è)置橢圓形邊框 */
}
圣誕老人形象
我們將使用多個(gè)div
元素來(lái)構(gòu)建圣誕老人的各個(gè)部分,包括頭部、眼睛、臉頰、胡子、帽子、身體、腰帶、手臂、手和腿。
/* 圣誕老人頭部樣式 */
.head {
--positionX: 27%;
/* 定義眼睛和臉頰的水平位置 */
--positionY: 63%;
/* 定義眼睛和臉頰的垂直位置 */
position: absolute;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 添加眨眼動(dòng)畫 */
}
.eye+.eye {
left: auto;
/* 取消之前的left屬性 */
right: var(--positionX);
/* 設(shè)置右側(cè)眼睛的位置 */
}
.cheek {
position: absolute;
/* 絕對(duì)定位 */
top: calc(var(--positionY) + 7%);
/* 計(jì)算臉頰的垂直位置 */
left: calc(var(--positionX) - 12%);
/* 計(jì)算臉頰的水平位置 */
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;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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è)置變換原點(diǎn) */
transform: translate(-100%, 0) rotate(25deg);
/* 將小胡子向左旋轉(zhuǎn)25度 */
animation: moveMustache 7s infinite linear;
/* 添加小胡子移動(dòng)動(dòng)畫 */
}
.mustache+.mustache {
left: 48%;
/* 設(shè)置左側(cè)小胡子的位置 */
border-radius: 10% 100% 0 100%;
/* 設(shè)置不規(guī)則形狀的邊框 */
transform-origin: top left;
/* 設(shè)置變換原點(diǎn) */
transform: rotate(-25deg);
/* 將小胡子向右旋轉(zhuǎn)25度 */
animation: moveMustache2 7s infinite linear;
/* 添加小胡子移動(dòng)動(dòng)畫 */
}
/* 圣誕老人帽子樣式 */
.hat {
position: absolute;
/* 絕對(duì)定位 */
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;
/* 顯示為塊級(jí)元素 */
position: absolute;
/* 絕對(duì)定位 */
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;
/* 顯示為塊級(jí)元素 */
position: absolute;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 顯示為塊級(jí)元素 */
position: absolute;
/* 絕對(duì)定位 */
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è)腿腳的位置 */
}
動(dòng)畫效果
為了讓圣誕老人更加生動(dòng),我們添加了一些動(dòng)畫效果,如眨眼和胡子的微動(dòng)。
/* 動(dòng)畫關(guān)鍵幀 */
/* 動(dòng)畫關(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%時(shí)的背景位置 */
}
60% {
background-position: -10px 21vmin, -30px 42vmin, 30px 30vmin, 15px 36vmin;
/* 設(shè)置60%時(shí)的背景位置 */
}
100% {
background-position: 0 35vmin, 0 70vmin, 0 50vmin, 0 60vmin;
/* 設(shè)置100%時(shí)的背景位置 */
}
}
@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)鍵幀動(dòng)畫 */
@keyframes moveMustache2 {
/* 在 0%, 40%, 44%, 和 100% 的時(shí)間點(diǎn)上,將小胡子旋轉(zhuǎn) -25 度 */
0%,
40%,
44%,
100% {
transform: rotate(-25deg);
}
/* 在 42% 的時(shí)間點(diǎn)上,將小胡子旋轉(zhuǎn) -30 度 */
42% {
transform: rotate(-30deg);
}
}
媒體查詢
為了適配偏好減少動(dòng)畫的用戶,我們使用媒體查詢來(lái)取消動(dòng)畫效果。
/* 媒體查詢,適配偏好減少動(dòng)畫的用戶 */
@media (prefers-reduced-motion) {
/* 如果用戶偏好減少動(dòng)畫,則取消所有元素的動(dòng)畫效果 */
* {
animation: none !important;
}
}
最后看下完整代碼
<!DOCTYPE html>
<html lang="zh-CN">
<!-- 設(shè)置文檔的語(yǔ)言為中文 -->
<head>
<meta charset="UTF-8">
<!-- 設(shè)置字符編碼為UTF-8,確保支持多種字符 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 設(shè)置視口,使頁(yè)面適應(yīng)不同設(shè)備的屏幕 -->
<title>CSS手繪圣誕老人 - 編程獅(w3cschool.cn)</title>
<!-- 設(shè)置網(wǎng)頁(yè)標(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;
/* 添加雪花飄落動(dòng)畫 */
}
/* 畫布樣式 */
.canvas {
width: 60vmin;
/* 設(shè)置畫布寬度 */
aspect-ratio: 1;
/* 設(shè)置畫布寬高比為1:1 */
position: absolute;
/* 絕對(duì)定位 */
top: 50%;
/* 距離頂部50% */
left: 50%;
/* 距離左側(cè)50% */
transform: translate(-50%, -50%);
/* 將畫布居中 */
}
.canvas::before {
content: "";
/* 偽元素內(nèi)容為空 */
display: block;
/* 顯示為塊級(jí)元素 */
position: absolute;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 添加眨眼動(dòng)畫 */
}
.eye+.eye {
left: auto;
/* 取消之前的left屬性 */
right: var(--positionX);
/* 設(shè)置右側(cè)眼睛的位置 */
}
.cheek {
position: absolute;
/* 絕對(duì)定位 */
top: calc(var(--positionY) + 7%);
/* 計(jì)算臉頰的垂直位置 */
left: calc(var(--positionX) - 12%);
/* 計(jì)算臉頰的水平位置 */
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;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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è)置變換原點(diǎn) */
transform: translate(-100%, 0) rotate(25deg);
/* 將小胡子向左旋轉(zhuǎn)25度 */
animation: moveMustache 7s infinite linear;
/* 添加小胡子移動(dòng)動(dòng)畫 */
}
.mustache+.mustache {
left: 48%;
/* 設(shè)置左側(cè)小胡子的位置 */
border-radius: 10% 100% 0 100%;
/* 設(shè)置不規(guī)則形狀的邊框 */
transform-origin: top left;
/* 設(shè)置變換原點(diǎn) */
transform: rotate(-25deg);
/* 將小胡子向右旋轉(zhuǎn)25度 */
animation: moveMustache2 7s infinite linear;
/* 添加小胡子移動(dòng)動(dòng)畫 */
}
/* 圣誕老人帽子樣式 */
.hat {
position: absolute;
/* 絕對(duì)定位 */
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;
/* 顯示為塊級(jí)元素 */
position: absolute;
/* 絕對(duì)定位 */
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;
/* 顯示為塊級(jí)元素 */
position: absolute;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 絕對(duì)定位 */
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;
/* 顯示為塊級(jí)元素 */
position: absolute;
/* 絕對(duì)定位 */
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è)腿腳的位置 */
}
/* 動(dòng)畫關(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%時(shí)的背景位置 */
}
60% {
background-position: -10px 21vmin, -30px 42vmin, 30px 30vmin, 15px 36vmin;
/* 設(shè)置60%時(shí)的背景位置 */
}
100% {
background-position: 0 35vmin, 0 70vmin, 0 50vmin, 0 60vmin;
/* 設(shè)置100%時(shí)的背景位置 */
}
}
@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)鍵幀動(dòng)畫 */
@keyframes moveMustache2 {
/* 在 0%, 40%, 44%, 和 100% 的時(shí)間點(diǎn)上,將小胡子旋轉(zhuǎn) -25 度 */
0%,
40%,
44%,
100% {
transform: rotate(-25deg);
}
/* 在 42% 的時(shí)間點(diǎn)上,將小胡子旋轉(zhuǎn) -30 度 */
42% {
transform: rotate(-30deg);
}
}
/* 媒體查詢,適配偏好減少動(dòng)畫的用戶 */
@media (prefers-reduced-motion) {
/* 如果用戶偏好減少動(dòng)畫,則取消所有元素的動(dòng)畫效果 */
* {
animation: none !important;
}
}
</style>
</head>
<body>
<div class="canvas" role="img" aria-label="一個(gè)站在雪地小山上的圣誕老人卡通形象。">
<!-- 創(chuàng)建一個(gè)畫布容器,包含圣誕老人的所有部分,并設(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)建一個(gè)圣誕老人.html
文件并使用編輯器打開,將以上代碼粘貼后保存,使用瀏覽器即可查看效果。
通過(guò)本教程,你不僅學(xué)會(huì)了如何使用CSS來(lái)手繪一個(gè)圣誕老人形象,還了解了如何通過(guò)CSS動(dòng)畫來(lái)增強(qiáng)網(wǎng)頁(yè)的互動(dòng)性。如果你想要更深入地學(xué)習(xí)CSS,編程獅(w3cschool.cn)提供了豐富的課程,包括CSS基礎(chǔ)、進(jìn)階技巧以及實(shí)戰(zhàn)項(xiàng)目,幫助你成為CSS高手?,F(xiàn)在就開始你的學(xué)習(xí)之旅吧,下一個(gè)圣誕節(jié),你或許可以自己制作一個(gè)更加復(fù)雜的圣誕主題網(wǎng)頁(yè)!