1.介绍
本篇文章将向大家介绍如何使用CSS绘制一个可爱的卡通狮子动画。通过本文的学习，您可以了解到如何使用CSS制作图形动画效果，如何掌握CSS关键帧规则，以及如何调整渐变和阴影等效果。
2.准备工作
2.1 引入CSS文件
首先，我们需要在HTML文件中引入CSS文件。在
标签中添加以下代码可以将CSS文件与HTML文件连接起来：<link rel="stylesheet" href="style.css">2.2 创建HTML结构
接下来，我们需要在HTML中创建一个div容器，这个容器将用于承载我们的狮子图形。
<div class="lion"></div>添加完HTML结构后，我们就可以开始CSS的编写了。
3.绘制狮子头部
首先，我们将使用CSS绘制狮子的头部。要做到这一点，您需要了解如何使用CSS创建基本的形状和渐变。
3.1 创建头部形状
在CSS中，我们可以使用伪元素 ::before 和 ::after 来创建基本的形状。为了创建狮子头部，我们将使用 ::before 伪元素来绘制一个圆形，这个圆形将被用作狮子头部的基础形状。在以下代码中，我们使用了 border-radius 属性将正方形变为圆形，使用 height 和 width 属性设置其尺寸：
.lion::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #F7DC6F;
}
这里使用position: absolute将圆形定位在父级div容器内。在top和left属性中，我们设置了初始位置（x轴和y轴）。
3.2 添加头部渐变
现在我们已经创建了狮子头部的基础形状，我们需要添加渐变效果使其看起来更真实。在以下代码中，我们使用 radial-gradient 函数添加了一个从黄色到白色的径向渐变效果：
.lion::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
height: 120px;
width: 120px;
border-radius: 50%;
background: radial-gradient(#F7DC6F, #FFF);
}
现在我们可以看到，狮子头部的外观更加逼真了。
4.绘制狮子眼睛
4.1 创建眼睛形状
下一步，我们将添加狮子眼睛。我们将使用 ::before 伪元素为狮子头部添加两个圆形，一个用于左眼，一个用于右眼。以下是我们如何使用 CSS 创建一个圆形：
.lion::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
height: 120px;
width: 120px;
border-radius: 50%;
background: radial-gradient(#F7DC6F, #FFF);
}
.lion::before .eye {
content: '';
height: 30px;
width: 30px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 40px;
left: 45px;
}
这里我们在 ::before 伪元素下添加了一个 .eye CSS类，通过这个类可以对眼睛进行定位和样式控制。将眼睛从中心定位到左上方，您可以使用 top 和 left 的 percentage 值，使得眼睛相对于头部容器定位。您也可以使用绝对长度值，比如px、em、rem。
4.2 旋转眼睛
现在我们已经创建了眼睛形状，我们让眼睛顺时针旋转15度，让其看起来更逼真。以下是如何在 CSS 中设置旋转角度的代码：
.lion::before .eye.left {
transform: rotate(-15deg);
}
.lion::before .eye.right {
transform: rotate(15deg);
}
这里我们分别给左右眼使用类名：.left和.right，让其样式设定互不影响。在 CSS中使用 transform 属性, 我们可以旋转图形、缩放图形、倾斜图形，甚至可以进行3D变换。
4.3 添加视网膜效果
为了使眼睛看起来更真实，我们将添加一个视网膜效果。我们使用 CSS 中的 ::after 伪元素为我们的眼睛添加一个小型白色圆形， 这个小圆形类似一颗钻石，可以增加眼睛的锐度：
.lion::before .eye::after {
content: "";
position: absolute;
top: 7px;
left: 7px;
height: 16px;
width: 16px;
border-radius: 50%;
background-color: white;
}
5.绘制狮子鼻子
5.1 创建基本形状
接下来，我们将添加狮子的鼻子。我们将使用 ::after 伪元素为狮子头部添加一个白色圆形，这个圆形将成为狮子鼻子的基础形状。以下是如何使用 CSS 创建一个圆形：
.lion::after {
content: "";
position: absolute;
top: 70px;
left: 50px;
height: 50px;
width: 50px;
border-radius: 50%;
background-color: white;
}
在这里，我们使用 ::after 伪元素在容器底部创建白色圆形。通过设置属性top和left，我们可以将白色圆形定位到恰当的位置。
5.2 添加鼻子渐变
现在我们已经创建了鼻子的基本形状，我们将添加一个线性渐变从上到下，使其看起来更真实。在以下代码中，我们在 ::after 伪元素上使用了 linear-gradient 函数添加了一个从黄色到白色的线性渐变：
.lion::after {
content: "";
position: absolute;
top: 70px;
left: 50px;
height: 50px;
width: 50px;
border-radius: 50%;
background: linear-gradient(to bottom, #F7DC6F, #FFF);
}
现在我们已经创建了一个很好的鼻子效果。
6.绘制狮子耳朵
6.1 创建耳朵形状
接下来，我们将添加狮子的耳朵。我们将使用 ::after 伪元素为狮子头部添加两个耳朵，一个用于左耳，一个用于右耳。以下是如何使用 CSS 创建耳朵形状：
.lion::before .ear {
position: absolute;
width: 35px;
height: 60px;
border-radius: 50%;
right: 80px;
background-color: #F7DC6F;
transform-origin: top center;
transform: rotate(-45deg);
}
.lion::before .ear.right {
left: 80px;
transform: rotate(45deg);
}
这里我们使用了 ::before 伪元素，定义了两个 .ear CSS 类，一个用于左耳，一个用于右耳。这两个形状都位于头部的顶部，根据需要使用 right 或 left 定义每个耳朵的位置。我们使用 background-color 属性将形状化为黄色，这是狮子的常见颜色。通过对 transform 属性的应用，我们将耳朵顺时针45度旋转，并且对其应用了 transform-origin 属性，以使其从顶部中心旋转而不是从左上角旋转。
6.2 调整耳朵渐变
我们将使用 linear-gradient 函数为耳朵添加渐变，让它看起来更真实。在以下代码中，我们为耳朵使用了两个不同的渐变标记来制作更加丰富的渐变效果：
.lion::before .ear {
position: absolute;
width: 35px;
height: 60px;
border-radius: 50%;
right: 80px;
background: linear-gradient(to bottom, #F7DC6F, #FFF, #F7DC6F);
transform-origin: top center;
transform: rotate(-45deg);
}
.lion::before .ear.right {
left: 80px;
background: linear-gradient(to bottom, #F7DC6F, #FFF, #F7DC6F);
transform: rotate(45deg);
}
我们使用了三种不同颜色的渐变：黄色，白色和黄色。因此，渐变颜色从黄色到白色，然后从白色到黄色。这为耳朵提供了更多的深度和维度。
7.添加狮子动画效果
现在我们已经创建了整个狮子。在这一步，我们将创建一个动画效果，使其看起来更有生命力。
7.1 定义关键帧
在 CSS 中，我们可以使用 @keyframes 规则定义动画。在以下代码中，我们定义了一个名为 roar 的关键帧，用于在动画期间更改元素的尺寸和位置：
@keyframes roar {
0% {
transform: scale(1);
transform-origin: center center;
top: 90px;
}
50% {
transform: scale(1.3);
transform-origin: center center;
top: 80px;
}
100% {
transform: scale(1);
transform-origin: center center;
top: 90px;
}
}
在这里，我们定义了从0%到100%的动画，将狮子的元素尺寸从正常大小增加到1.3倍，然后返回原始大小。同时，我们将元素的 top 属性从90px向上移动到80px，然后向下移回90px。
7.2 应用关键帧
现在，我们已经定义了 roar 关键帧。我们需要将其应用到狮子元素上，使得动画可以正常展示。在以下代码中，我们在 .lion CSS类中添加了以下内容：
.lion {
position: relative;
animation: roar 2s ease-in-out infinite;
}
这基本上告诉浏览器应该在 .lion 元素上应用名为 roar 的动画。ease-in-out 表示动画时间开始和结束的瞬间都会慢下来，进出所有阶段都有缓动效果。infinite 表示动画将无穷循环播放。
8.绘制狮子身体
8.1 创建身体形状
现在，我们终于可以进行最后一个步骤了，我们将通过 ::after 伪元素创建狮子身体。使用以下代码，我们将创建一个圆角矩形，这个矩形将成为狮子的身体：
.lion::after {
content: "";
position: absolute;
top: 140px;
left: 20px;
height: 80px;
width: 140px;
border-radius: 100px 100px 50px 50px;
background-color: #F7DC6F;
}
我们使用 ::after 伪元素并将其调整为相对定位。然后，根据需要通过设置top和left属性，将其定位到底部。我们使用border-radius属性将矩形变为圆角矩形，同时添加黄色背景 color。
8.2 调整渐变
为了使狮子身体看起来更真实，我们将添加一个渐变效果。我们将使用以下代码为身体添加线性渐变：
.lion::after {
content: "";
position: absolute;
top: 140px;
left: 20px;
height: 80px;
width: 140px;
border-radius: 100px 100px 50px 50px;
background: linear-gradient(to bottom, #F7DC6F, #F0C30F);
}
现在我们已经创建了一个可爱的卡通狮子的CSS动画，并且掌握了许多CSS技巧。
9.总结
通过本文的学习，您可以了解到如何使用CSS制作图形动画效果，如何掌握CSS关键帧规则，以及如何调整渐变和阴影等效果。请随意尝试使用不同的颜色和尺寸去打造您自己的狮子动画。