在这篇文章中，我们将学习如何使用CSS来手绘一个圣诞老人的卡通形象。这不仅是一个有趣的练习，也是提升你CSS技能的好机会。通过本教程，你将学会如何使用CSS变量、伪元素、动画和媒体查询来创建一个生动的圣诞老人形象。如果你对CSS还不够熟悉，不妨先浏览一下编程狮上的相关课程，这将为你打下坚实的基础。
效果图： 
准备工作
在开始之前，请确保你有一个现代浏览器和一个代码编辑器。你可以直接在浏览器的开发者工具中尝试这些代码，或者创建一个HTML文件来保存你的代码。推荐使用免费AI编程助手——豆包 MarsCode，能大大提升我们的开发效率。
HTML结构
首先，我们需要创建一个HTML结构来作为圣诞老人形象的基础。我们将使用一个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;
/* 圣诞老人腰带扣颜色 */
}
全局样式
我们设置背景为天蓝色，并添加雪花效果，以营造圣诞氛围。
body {
background: SkyBlue;
/* 背景颜色为天蓝色 */
overflow: hidden;
/* 隐藏溢出的内容 */
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;
/* 设置背景图像大小 */
background-position: 0 0;
/* 设置背景图像位置 */
animation: snow infinite 7s linear;
/* 添加雪花飘落动画 */
}
画布样式
我们将画布居中，并设置其大小和宽高比。
.canvas {
width: 60vmin;
/* 设置画布宽度 */
aspect-ratio: 1;
/* 设置画布宽高比为1:1 */
position: absolute;
/* 绝对定位 */
top: 50%;
/* 距离顶部50% */
left: 50%;
/* 距离左侧50% */
transform: translate(-50%, -50%);
/* 将画布居中 */
}
.canvas::before {
content: "";
/* 伪元素内容为空 */
display: block;
/* 显示为块级元素 */
position: absolute;
/* 绝对定位 */
top: 90%;
/* 距离顶部90% */
left: 50%;
/* 距离左侧50% */
width: 200vmax;
/* 设置宽度 */
height: 200vmax;
/* 设置高度 */
background: white;
/* 背景颜色为白色 */
transform: translate(-50%, 0) rotate(1deg);
/* 将伪元素居中并旋转1度 */
border-radius: 100% / 20%;
/* 设置椭圆形边框 */
}
圣诞老人形象
我们将使用多个div元素来构建圣诞老人的各个部分，包括头部、眼睛、脸颊、胡子、帽子、身体、腰带、手臂、手和腿。
/* 圣诞老人头部样式 */
.head {
--positionX: 27%;
/* 定义眼睛和脸颊的水平位置 */
--positionY: 63%;
/* 定义眼睛和脸颊的垂直位置 */
position: absolute;
/* 绝对定位 */
top: 10%;
/* 距离顶部10% */
left: 50%;
/* 距离左侧50% */
border-radius: 50%;
/* 设置圆形边框 */
width: 25%;
/* 设置宽度 */
height: 25%;
/* 设置高度 */
transform: translate(-50%, 0);
/* 将头部居中 */
background: var(--skin);
/* 设置背景颜色为皮肤色 */
}
.eye {
position: absolute;
/* 绝对定位 */
top: var(--positionY);
/* 使用定义的垂直位置 */
left: var(--positionX);
/* 使用定义的水平位置 */
width: 12%;
/* 设置宽度 */
height: 12%;
/* 设置高度 */
background: var(--eyes);
/* 设置背景颜色为黑色 */
border-radius: 50%;
/* 设置圆形边框 */
animation: blink 5s infinite linear;
/* 添加眨眼动画 */
}
.eye+.eye {
left: auto;
/* 取消之前的left属性 */
right: var(--positionX);
/* 设置右侧眼睛的位置 */
}
.cheek {
position: absolute;
/* 绝对定位 */
top: calc(var(--positionY) + 7%);
/* 计算脸颊的垂直位置 */
left: calc(var(--positionX) - 12%);
/* 计算脸颊的水平位置 */
width: 20%;
/* 设置宽度 */
height: 12%;
/* 设置高度 */
background: var(--cheeks);
/* 设置背景颜色为脸颊色 */
border-radius: 50%;
/* 设置圆形边框 */
}
.cheek+.cheek {
left: auto;
/* 取消之前的left属性 */
right: calc(var(--positionX) - 12%);
/* 设置右侧脸颊的位置 */
}
/* 圣诞老人胡须和小胡子样式 */
.beard {
position: absolute;
/* 绝对定位 */
top: 10%;
/* 距离顶部10% */
left: 50%;
/* 距离左侧50% */
width: 30%;
/* 设置宽度 */
height: 40%;
/* 设置高度 */
background: var(--beard);
/* 设置背景颜色为胡子色 */
transform: translate(-50%, 0);
/* 将胡须居中 */
border-radius: 100% / 120% 120% 80% 80%;
/* 设置不规则形状的边框 */
}
.mustache {
position: absolute;
/* 绝对定位 */
top: 88%;
/* 距离顶部88% */
left: 52%;
/* 距离左侧52% */
width: 40%;
/* 设置宽度 */
height: 40%;
/* 设置高度 */
background: var(--mustache);
/* 设置背景颜色为小胡子色 */
border-radius: 100% 10% 100% 0;
/* 设置不规则形状的边框 */
transform-origin: top right;
/* 设置变换原点 */
transform: translate(-100%, 0) rotate(25deg);
/* 将小胡子向左旋转25度 */
animation: moveMustache 7s infinite linear;
/* 添加小胡子移动动画 */
}
.mustache+.mustache {
left: 48%;
/* 设置左侧小胡子的位置 */
border-radius: 10% 100% 0 100%;
/* 设置不规则形状的边框 */
transform-origin: top left;
/* 设置变换原点 */
transform: rotate(-25deg);
/* 将小胡子向右旋转25度 */
animation: moveMustache2 7s infinite linear;
/* 添加小胡子移动动画 */
}
/* 圣诞老人帽子样式 */
.hat {
position: absolute;
/* 绝对定位 */
width: 98%;
/* 设置宽度 */
height: 80%;
/* 设置高度 */
background: var(--suit);
/* 设置背景颜色为衣服色 */
border-radius: 100% 20% 0 0;
/* 设置不规则形状的边框 */
top: -40%;
/* 距离顶部-40% */
left: 50%;
/* 距离左侧50% */
transform: translate(-50%, 0) rotate(1deg);
/* 将帽子居中并旋转1度 */
}
.hat::before {
content: "";
/* 伪元素内容为空 */
display: block;
/* 显示为块级元素 */
position: absolute;
/* 绝对定位 */
bottom: -17%;
/* 距离底部-17% */
left: -5%;
/* 距离左侧-5% */
width: 110%;
/* 设置宽度 */
height: 40%;
/* 设置高度 */
border-radius: 100% / 50%;
/* 设置椭圆形边框 */
transform: rotate(-2deg);
/* 旋转-2度 */
background: radial-gradient(200% 100% at 50% 100%, #0000 30%, var(--mustache) 31%);
/* 设置径向渐变背景 */
}
.hat::after {
content: "";
/* 伪元素内容为空 */
display: block;
/* 显示为块级元素 */
position: absolute;
/* 绝对定位 */
right: -25%;
/* 距离右侧-25% */
top: -15%;
/* 距离顶部-15% */
width: 40%;
/* 设置宽度 */
aspect-ratio: 1;
/* 设置宽高比为1:1 */
border-radius: 50%;
/* 设置圆形边框 */
background: var(--beard);
/* 设置背景颜色为胡子色 */
}
/* 圣诞老人身体样式 */
.body {
position: absolute;
/* 绝对定位 */
top: 35%;
/* 距离顶部35% */
left: 50%;
/* 距离左侧50% */
width: 50%;
/* 设置宽度 */
height: 50%;
/* 设置高度 */
background: var(--suit);
/* 设置背景颜色为衣服色 */
border-radius: 100% / 150% 150% 25% 25%;
/* 设置不规则形状的边框 */
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%);
/* 设置径向渐变背景和线性渐变背景 */
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 51% 100%, 50% 96%, 49% 100%, 0% 100%);
/* 设置裁剪路径 */
}
.belt {
position: absolute;
/* 绝对定位 */
top: 75%;
/* 距离顶部75% */
left: 50%;
/* 距离左侧50% */
transform: translate(-50%, -50%);
/* 将腰带居中 */
width: 23%;
/* 设置宽度 */
height: 15%;
/* 设置高度 */
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);
/* 设置背景图像和背景颜色 */
}
/* 圣诞老人手臂样式 */
.arms {
position: absolute;
/* 绝对定位 */
top: 37%;
/* 距离顶部37% */
left: 50%;
/* 距离左侧50% */
transform: translate(-50%, 0);
/* 将手臂居中 */
width: 65%;
/* 设置宽度 */
height: 40%;
/* 设置高度 */
background: OrangeRed;
/* 设置背景颜色为橙红色 */
border-radius: 100% / 170% 170% 25% 25%;
/* 设置不规则形状的边框 */
background-image: linear-gradient(transparent 20%, #0003);
/* 设置线性渐变背景 */
}
.hand {
--positionX: 18%;
/* 定义手的水平位置 */
position: absolute;
/* 绝对定位 */
top: 70%;
/* 距离顶部70% */
left: var(--positionX);
/* 使用定义的水平位置 */
width: 13%;
/* 设置宽度 */
height: 13%;
/* 设置高度 */
background: var(--belt);
/* 设置背景颜色为腰带色 */
border-radius: 50%;
/* 设置圆形边框 */
}
.hand+.hand {
left: auto;
/* 取消之前的left属性 */
right: var(--positionX);
/* 设置右侧手的位置 */
}
/* 圣诞老人腿部样式 */
.leg {
position: absolute;
/* 绝对定位 */
top: 75%;
/* 距离顶部75% */
left: 29%;
/* 距离左侧29% */
width: 19%;
/* 设置宽度 */
height: 25%;
/* 设置高度 */
background: var(--suit);
/* 设置背景颜色为衣服色 */
transform: skew(2deg);
/* 斜切变形 */
background-image: linear-gradient(#0002, transparent 70%, var(--belt) 0);
/* 设置线性渐变背景 */
}
.leg+.leg {
left: 52%;
/* 设置右侧腿的位置 */
}
.leg::after {
content: "";
/* 伪元素内容为空 */
display: block;
/* 显示为块级元素 */
position: absolute;
/* 绝对定位 */
bottom: 0;
/* 距离底部0 */
left: -6%;
/* 距离左侧-6% */
width: 110%;
/* 设置宽度 */
height: 20%;
/* 设置高度 */
background: black;
/* 设置背景颜色为黑色 */
border-radius: 50% / 100% 100% 0 0;
/* 设置椭圆形边框 */
}
.leg+.leg::after {
left: -4%;
/* 设置右侧腿脚的位置 */
}
动画效果
为了让圣诞老人更加生动，我们添加了一些动画效果，如眨眼和胡子的微动。
/* 动画关键帧 */
/* 动画关键帧 */
@keyframes snow {
0% {
background-position: 0 0, 0 0, 0 0, 0 0;
/* 设置初始背景位置 */
}
40% {
background-position: 10px 14vmin, -20px 28vmin, 20px 20vmin, 10px 24vmin;
/* 设置40%时的背景位置 */
}
60% {
background-position: -10px 21vmin, -30px 42vmin, 30px 30vmin, 15px 36vmin;
/* 设置60%时的背景位置 */
}
100% {
background-position: 0 35vmin, 0 70vmin, 0 50vmin, 0 60vmin;
/* 设置100%时的背景位置 */
}
}
@keyframes blink {
0%,
6%,
100% {
height: 12%;
/* 设置眼睛的高度 */
}
3% {
height: 0%;
/* 设置眼睛的高度为0，模拟眨眼 */
}
}
@keyframes moveMustache {
0%,
40%,
44%,
100% {
transform: translate(-100%, 0) rotate(25deg);
/* 设置小胡子的初始和结束状态 */
}
42% {
transform: translate(-100%, 0) rotate(30deg);
/* 设置小胡子的中间状态 */
}
}
/* 定义名为 moveMustache2 的关键帧动画 */
@keyframes moveMustache2 {
/* 在 0%, 40%, 44%, 和 100% 的时间点上，将小胡子旋转 -25 度 */
0%,
40%,
44%,
100% {
transform: rotate(-25deg);
}
/* 在 42% 的时间点上，将小胡子旋转 -30 度 */
42% {
transform: rotate(-30deg);
}
}
媒体查询
为了适配偏好减少动画的用户，我们使用媒体查询来取消动画效果。
/* 媒体查询，适配偏好减少动画的用户 */
@media (prefers-reduced-motion) {
/* 如果用户偏好减少动画，则取消所有元素的动画效果 */
* {
animation: none !important;
}
}
最后看下完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<!-- 设置文档的语言为中文 -->
<head>
<meta charset="UTF-8">
<!-- 设置字符编码为UTF-8，确保支持多种字符 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面适应不同设备的屏幕 -->
<title>CSS手绘圣诞老人 - 编程狮(w3cschool.cn)</title>
<!-- 设置网页标题 -->
<style>
/* 定义颜色变量 */
:root {
--skin: PeachPuff;
/* 圣诞老人皮肤颜色 */
--eyes: Black;
/* 圣诞老人眼睛颜色 */
--cheeks: Salmon;
/* 圣诞老人脸颊颜色 */
--beard: GhostWhite;
/* 圣诞老人胡子颜色 */
--mustache: white;
/* 圣诞老人小胡子颜色 */
--suit: Tomato;
/* 圣诞老人衣服颜色 */
--belt: #363636;
/* 圣诞老人腰带颜色 */
--belt-buckle: gold;
/* 圣诞老人腰带扣颜色 */
}
/* 全局样式 */
body {
background: SkyBlue;
/* 背景颜色为天蓝色 */
overflow: hidden;
/* 隐藏溢出的内容 */
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;
/* 设置背景图像大小 */
background-position: 0 0;
/* 设置背景图像位置 */
animation: snow infinite 7s linear;
/* 添加雪花飘落动画 */
}
/* 画布样式 */
.canvas {
width: 60vmin;
/* 设置画布宽度 */
aspect-ratio: 1;
/* 设置画布宽高比为1:1 */
position: absolute;
/* 绝对定位 */
top: 50%;
/* 距离顶部50% */
left: 50%;
/* 距离左侧50% */
transform: translate(-50%, -50%);
/* 将画布居中 */
}
.canvas::before {
content: "";
/* 伪元素内容为空 */
display: block;
/* 显示为块级元素 */
position: absolute;
/* 绝对定位 */
top: 90%;
/* 距离顶部90% */
left: 50%;
/* 距离左侧50% */
width: 200vmax;
/* 设置宽度 */
height: 200vmax;
/* 设置高度 */
background: white;
/* 背景颜色为白色 */
transform: translate(-50%, 0) rotate(1deg);
/* 将伪元素居中并旋转1度 */
border-radius: 100% / 20%;
/* 设置椭圆形边框 */
}
/* 圣诞老人头部样式 */
.head {
--positionX: 27%;
/* 定义眼睛和脸颊的水平位置 */
--positionY: 63%;
/* 定义眼睛和脸颊的垂直位置 */
position: absolute;
/* 绝对定位 */
top: 10%;
/* 距离顶部10% */
left: 50%;
/* 距离左侧50% */
border-radius: 50%;
/* 设置圆形边框 */
width: 25%;
/* 设置宽度 */
height: 25%;
/* 设置高度 */
transform: translate(-50%, 0);
/* 将头部居中 */
background: var(--skin);
/* 设置背景颜色为皮肤色 */
}
.eye {
position: absolute;
/* 绝对定位 */
top: var(--positionY);
/* 使用定义的垂直位置 */
left: var(--positionX);
/* 使用定义的水平位置 */
width: 12%;
/* 设置宽度 */
height: 12%;
/* 设置高度 */
background: var(--eyes);
/* 设置背景颜色为黑色 */
border-radius: 50%;
/* 设置圆形边框 */
animation: blink 5s infinite linear;
/* 添加眨眼动画 */
}
.eye+.eye {
left: auto;
/* 取消之前的left属性 */
right: var(--positionX);
/* 设置右侧眼睛的位置 */
}
.cheek {
position: absolute;
/* 绝对定位 */
top: calc(var(--positionY) + 7%);
/* 计算脸颊的垂直位置 */
left: calc(var(--positionX) - 12%);
/* 计算脸颊的水平位置 */
width: 20%;
/* 设置宽度 */
height: 12%;
/* 设置高度 */
background: var(--cheeks);
/* 设置背景颜色为脸颊色 */
border-radius: 50%;
/* 设置圆形边框 */
}
.cheek+.cheek {
left: auto;
/* 取消之前的left属性 */
right: calc(var(--positionX) - 12%);
/* 设置右侧脸颊的位置 */
}
/* 圣诞老人胡须和小胡子样式 */
.beard {
position: absolute;
/* 绝对定位 */
top: 10%;
/* 距离顶部10% */
left: 50%;
/* 距离左侧50% */
width: 30%;
/* 设置宽度 */
height: 40%;
/* 设置高度 */
background: var(--beard);
/* 设置背景颜色为胡子色 */
transform: translate(-50%, 0);
/* 将胡须居中 */
border-radius: 100% / 120% 120% 80% 80%;
/* 设置不规则形状的边框 */
}
.mustache {
position: absolute;
/* 绝对定位 */
top: 88%;
/* 距离顶部88% */
left: 52%;
/* 距离左侧52% */
width: 40%;
/* 设置宽度 */
height: 40%;
/* 设置高度 */
background: var(--mustache);
/* 设置背景颜色为小胡子色 */
border-radius: 100% 10% 100% 0;
/* 设置不规则形状的边框 */
transform-origin: top right;
/* 设置变换原点 */
transform: translate(-100%, 0) rotate(25deg);
/* 将小胡子向左旋转25度 */
animation: moveMustache 7s infinite linear;
/* 添加小胡子移动动画 */
}
.mustache+.mustache {
left: 48%;
/* 设置左侧小胡子的位置 */
border-radius: 10% 100% 0 100%;
/* 设置不规则形状的边框 */
transform-origin: top left;
/* 设置变换原点 */
transform: rotate(-25deg);
/* 将小胡子向右旋转25度 */
animation: moveMustache2 7s infinite linear;
/* 添加小胡子移动动画 */
}
/* 圣诞老人帽子样式 */
.hat {
position: absolute;
/* 绝对定位 */
width: 98%;
/* 设置宽度 */
height: 80%;
/* 设置高度 */
background: var(--suit);
/* 设置背景颜色为衣服色 */
border-radius: 100% 20% 0 0;
/* 设置不规则形状的边框 */
top: -40%;
/* 距离顶部-40% */
left: 50%;
/* 距离左侧50% */
transform: translate(-50%, 0) rotate(1deg);
/* 将帽子居中并旋转1度 */
}
.hat::before {
content: "";
/* 伪元素内容为空 */
display: block;
/* 显示为块级元素 */
position: absolute;
/* 绝对定位 */
bottom: -17%;
/* 距离底部-17% */
left: -5%;
/* 距离左侧-5% */
width: 110%;
/* 设置宽度 */
height: 40%;
/* 设置高度 */
border-radius: 100% / 50%;
/* 设置椭圆形边框 */
transform: rotate(-2deg);
/* 旋转-2度 */
background: radial-gradient(200% 100% at 50% 100%, #0000 30%, var(--mustache) 31%);
/* 设置径向渐变背景 */
}
.hat::after {
content: "";
/* 伪元素内容为空 */
display: block;
/* 显示为块级元素 */
position: absolute;
/* 绝对定位 */
right: -25%;
/* 距离右侧-25% */
top: -15%;
/* 距离顶部-15% */
width: 40%;
/* 设置宽度 */
aspect-ratio: 1;
/* 设置宽高比为1:1 */
border-radius: 50%;
/* 设置圆形边框 */
background: var(--beard);
/* 设置背景颜色为胡子色 */
}
/* 圣诞老人身体样式 */
.body {
position: absolute;
/* 绝对定位 */
top: 35%;
/* 距离顶部35% */
left: 50%;
/* 距离左侧50% */
width: 50%;
/* 设置宽度 */
height: 50%;
/* 设置高度 */
background: var(--suit);
/* 设置背景颜色为衣服色 */
border-radius: 100% / 150% 150% 25% 25%;
/* 设置不规则形状的边框 */
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%);
/* 设置径向渐变背景和线性渐变背景 */
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 51% 100%, 50% 96%, 49% 100%, 0% 100%);
/* 设置裁剪路径 */
}
.belt {
position: absolute;
/* 绝对定位 */
top: 75%;
/* 距离顶部75% */
left: 50%;
/* 距离左侧50% */
transform: translate(-50%, -50%);
/* 将腰带居中 */
width: 23%;
/* 设置宽度 */
height: 15%;
/* 设置高度 */
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);
/* 设置背景图像和背景颜色 */
}
/* 圣诞老人手臂样式 */
.arms {
position: absolute;
/* 绝对定位 */
top: 37%;
/* 距离顶部37% */
left: 50%;
/* 距离左侧50% */
transform: translate(-50%, 0);
/* 将手臂居中 */
width: 65%;
/* 设置宽度 */
height: 40%;
/* 设置高度 */
background: OrangeRed;
/* 设置背景颜色为橙红色 */
border-radius: 100% / 170% 170% 25% 25%;
/* 设置不规则形状的边框 */
background-image: linear-gradient(transparent 20%, #0003);
/* 设置线性渐变背景 */
}
.hand {
--positionX: 18%;
/* 定义手的水平位置 */
position: absolute;
/* 绝对定位 */
top: 70%;
/* 距离顶部70% */
left: var(--positionX);
/* 使用定义的水平位置 */
width: 13%;
/* 设置宽度 */
height: 13%;
/* 设置高度 */
background: var(--belt);
/* 设置背景颜色为腰带色 */
border-radius: 50%;
/* 设置圆形边框 */
}
.hand+.hand {
left: auto;
/* 取消之前的left属性 */
right: var(--positionX);
/* 设置右侧手的位置 */
}
/* 圣诞老人腿部样式 */
.leg {
position: absolute;
/* 绝对定位 */
top: 75%;
/* 距离顶部75% */
left: 29%;
/* 距离左侧29% */
width: 19%;
/* 设置宽度 */
height: 25%;
/* 设置高度 */
background: var(--suit);
/* 设置背景颜色为衣服色 */
transform: skew(2deg);
/* 斜切变形 */
background-image: linear-gradient(#0002, transparent 70%, var(--belt) 0);
/* 设置线性渐变背景 */
}
.leg+.leg {
left: 52%;
/* 设置右侧腿的位置 */
}
.leg::after {
content: "";
/* 伪元素内容为空 */
display: block;
/* 显示为块级元素 */
position: absolute;
/* 绝对定位 */
bottom: 0;
/* 距离底部0 */
left: -6%;
/* 距离左侧-6% */
width: 110%;
/* 设置宽度 */
height: 20%;
/* 设置高度 */
background: black;
/* 设置背景颜色为黑色 */
border-radius: 50% / 100% 100% 0 0;
/* 设置椭圆形边框 */
}
.leg+.leg::after {
left: -4%;
/* 设置右侧腿脚的位置 */
}
/* 动画关键帧 */
@keyframes snow {
0% {
background-position: 0 0, 0 0, 0 0, 0 0;
/* 设置初始背景位置 */
}
40% {
background-position: 10px 14vmin, -20px 28vmin, 20px 20vmin, 10px 24vmin;
/* 设置40%时的背景位置 */
}
60% {
background-position: -10px 21vmin, -30px 42vmin, 30px 30vmin, 15px 36vmin;
/* 设置60%时的背景位置 */
}
100% {
background-position: 0 35vmin, 0 70vmin, 0 50vmin, 0 60vmin;
/* 设置100%时的背景位置 */
}
}
@keyframes blink {
0%,
6%,
100% {
height: 12%;
/* 设置眼睛的高度 */
}
3% {
height: 0%;
/* 设置眼睛的高度为0，模拟眨眼 */
}
}
@keyframes moveMustache {
0%,
40%,
44%,
100% {
transform: translate(-100%, 0) rotate(25deg);
/* 设置小胡子的初始和结束状态 */
}
42% {
transform: translate(-100%, 0) rotate(30deg);
/* 设置小胡子的中间状态 */
}
}
/* 定义名为 moveMustache2 的关键帧动画 */
@keyframes moveMustache2 {
/* 在 0%, 40%, 44%, 和 100% 的时间点上，将小胡子旋转 -25 度 */
0%,
40%,
44%,
100% {
transform: rotate(-25deg);
}
/* 在 42% 的时间点上，将小胡子旋转 -30 度 */
42% {
transform: rotate(-30deg);
}
}
/* 媒体查询，适配偏好减少动画的用户 */
@media (prefers-reduced-motion) {
/* 如果用户偏好减少动画，则取消所有元素的动画效果 */
* {
animation: none !important;
}
}
</style>
</head>
<body>
<div class="canvas" role="img" aria-label="一个站在雪地小山上的圣诞老人卡通形象。">
<!-- 创建一个画布容器，包含圣诞老人的所有部分，并设置ARIA标签以便于辅助技术 -->
<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>
创建一个圣诞老人.html文件并使用编辑器打开，将以上代码粘贴后保存，使用浏览器即可查看效果。
通过本教程，你不仅学会了如何使用CSS来手绘一个圣诞老人形象，还了解了如何通过CSS动画来增强网页的互动性。如果你想要更深入地学习CSS，编程狮(w3cschool.cn)提供了丰富的课程，包括CSS基础、进阶技巧以及实战项目，帮助你成为CSS高手。现在就开始你的学习之旅吧，下一个圣诞节，你或许可以自己制作一个更加复杂的圣诞主题网页！
小狮博客
学起来容易：
啥都能⼲：
资源超多：
到处都能跑：
开发快速：
有个超⼤的社区：
学校⾥也爱⽤：
新技术的最佳伙伴：
从基础开始：
动⼿实践：
利⽤在线资源：
加⼊社区：
阅读代码：
多做项⽬：
学习框架和库：
持续更新知识：
错误是你的朋友：
享受编程：
⽬标：能⽤Python编写待办事项列表应⽤程序：创建⼀个简单的控制台应⽤，允许⽤户添加、删除和查看待办事项。
