使用CSS创建动画在网站设计中是很好的创意表达技巧。与通常的Web组件日常样式相比，这是一个很好的突破。您需要开始的只是一个空白文档和一个CSS文件; 我们建议使用sass或者lass，这将使您能够重用您的样式并编写更简单的选择器。
我们将从掌握CSS艺术的一些顶级技巧开始，然后向您展示如何仅使用CSS重新创建这个动画气球皮卡丘。要获得更多灵感，请探索我们的惊人CSS动画示例。什么更基本的东西？首先学习如何使用CSS创建冰棍。
将设计简化为简单的形状。在创建CSS图形时，它可以帮助您查看一些参考图像以获得灵感，然后在您进行时创建简化的卡通变体，使用原始形状设想主题，从而制作出更好的CSS形状。
使用明亮的背景来帮助定位。当重叠相似颜色的形状时，很难看到它们被放置的位置或它们的外观。通过将背景颜色改变为明亮和愉快的东西（如洋红色），使您正在工作的形状脱颖而出是有用的。这使您可以轻松查看元素的确切位置和形状。
在定义属性的数值时，我们建议使用rem单元而不是px。如果您决定希望整体作品更大或更小，通过使用rem单位，您只需更改Sass中的基本html {font-size：... px}即可向上或向下缩放整个作品。
在定义应该与父级相对大小的子元素的高度和宽度时，百分比会派上用场。由于这些值始终相对于父级，因此它们也应使用html font-size进行扩展。
在容器内，我们可以放置三个内部容器，头部，身体和气球三个组成部分。
<div class="container">
<div class="head"></div>
<div class="body"></div>
<div class="balloons"></div>
</div>
容器通常应该是位置：相对于允许其他元素相对地放置在其中使用position：absolute并且具有明确定义的高度和宽度，否则定位子元素变得困难。
在您的样式中，将基色添加为Sass变量以实现可重用性。Sass lighten（）和darken（）函数将创建颜色的色调和阴影，可用作角色的高光或阴影。
使用这种技术与rem和百分比组合，你可以制作类似blob的形状，而不仅仅是普通的椭圆，它可以使用html {font-size：... px}自然缩放：
.face {
border-top-left-radius: 50% 4.5rem;
border-top-right-radius: 50% 4.5rem;
border-bottom-left-radius: 50% 3rem;
border-bottom-right-radius: 50% 3rem;
...
}
在完善头部的边缘半径后，将其余的面部特征定位为头部的子元素，例如眼睛，脸颊，鼻子和耳朵。像头部一样，边界半径技巧将派上用场，因为边界半径：50％可能看起来不吸引人。
身体<div>可放置在头部后面的身体容器内，并采用相同的边缘半径技术以及手臂，腿和尾巴成形。为了允许正确的重叠，实际的主体应该是它自己的元素，因为像背条一样的某些内部元素需要用overflow：hidden来切断。为了让身体更加深入，transform：skew（）属性可以略微覆盖身体。
闪电尾翼可以使用三个单独的矩形来构建，而不是试图从一个元素形成这种形状。矩形可以旋转并定位在彼此的顶部上以形成螺栓。手臂和腿可以使用我们使用Sass darken（）创建的较暗的原色，以便它们脱颖而出。
现在电动鼠标已经完成，让我们将气球系在后面。添加一些的<div> s的共享样式的小孩字符串的<div>和放置它们捆成头以上。除了border-left之外，该字符串是不可见的，这有助于使其看起来更像字符串。
为了将绳子系在角色的腰部周围，可以在身体内放置一个<div>以便正确定位。字符串需要一个轻微的曲线，好像它绑在身体周围，所以它可以有一个小的高度，边框底部和一个边框底部左右半径，这使得一个很细的曲线：
.string {
height: 1rem;
width: 9rem;
border-right: solid 1px $white;
border-left: solid 1px $white;
border-bottom: solid 1px $white;
border-bottom-left-radius: 50% 1rem;
border-bottom-right-radius: 50% 1rem;
}
我们可以通过添加@keyframes动画来赋予角色生命。可以使用transform：rotate（）动画手臂，腿，耳朵和尾巴。确保将变换原点设置为“关节”（即腿的顶部中心）并调整旋转。这个动画类型可以在Sass mixin中多次使用：
@mixin animateRotate($name, $start, $end) {
@keyframes #{$name} {
0%, 100% { transform: rotate(#{$start}deg) }
50% { transform: rotate(#{$end}deg) }
}
}
最后，添加一个慢速5s 变换：translateY（）关键帧动画将使角色上下动画，就好像它是浮动的一样。为了获得真实感，可以使用变换：scaleY（0.1）属性的闪烁动画使其看起来好像眼睛正在关闭。