CSS手绘圣诞老人教程 - 创造节日气氛的网页设计技巧（附源码）

焰火灿烂时 2024-12-09 18:49:58 浏览数 (112)
反馈

在这篇文章中，我们将学习如何使用CSS来手绘一个圣诞老人的卡通形象。这不仅是一个有趣的练习，也是提升你CSS技能的好机会。通过本教程，你将学会如何使用CSS变量、伪元素、动画和媒体查询来创建一个生动的圣诞老人形象。如果你对CSS还不够熟悉，不妨先浏览一下编程狮上的相关课程，这将为你打下坚实的基础。

效果图： CSS绘制圣诞老人

准备工作

在开始之前，请确保你有一个现代浏览器和一个代码编辑器。你可以直接在浏览器的开发者工具中尝试这些代码，或者创建一个HTML文件来保存你的代码。推荐使用免费AI编程助手——豆包 MarsCode，能大大提升我们的开发效率。

豆包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高手。现在就开始你的学习之旅吧，下一个圣诞节，你或许可以自己制作一个更加复杂的圣诞主题网页！

HTML CSS

1 人点赞

©w3cschool编程狮闽ICP备15016281号-3

违法和不良信息举报电话：173-0602-2364|举报邮箱：jubao@eeedong.com