我正在参加「码上挑战赛」概况请看：码上挑战赛来了！

前语

春困、夏倦、秋乏、蛰伏，今日给咱们分享的是：运用 CSS 画一只打打盹的小猪，本文会带咱们手把手实现这个作用。

码上

手把手带咱们运用CSS画一只打打盹的小猪

思路解析

脑阔

首先便是小猪的脑袋了，这儿咱们用的是 border-radius 特点来处理，咱们能够将小猪的脑袋上下部分分别运用不同的弧度来使小猪看着不那么生硬。

border-top-left-radius: 80px;
border-top-right-radius: 80px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;

手把手带咱们运用CSS画一只打打盹的小猪

看着还挺像大白馒头，整饿了都。

脑阔知识点

border-radius

实践上 border-radius 是能够简写的，至于为啥我没有简写，因为个人习气问题。实践工作中仍是推荐咱们运用简写的形式。

border-radius:*1-4 length*| *%* /*1-4 length*| *%* ;

每个半径的四个值的次序是：左上角，右上角，右下角，左下角。假如省掉左下角，右上角是相同的。假如省掉右下角，左上角是相同的。假如省掉右上角，左上角是相同的。

值 描绘
length 界说弯道的形状。
% 运用%界说角落的形状。

耳朵

猪耳朵富含胶质，适用于气血虚损、身体瘦弱者食用，多用于烧烹制各种菜。。。跑偏了跑偏了。

小猪耳朵我个人感觉是最需求考虑的一个部位了，就“怎么画才能让它更灵性”这个问题上我打磨了好一会时间。

原本想直接用三角形的，但是那不契合咱们顶级前端的身份。不必，但是能够用一点点，简略来说便是借鉴一下三角形的思路。

width: 26px;
height: 30px;
border: 1px solid #000;
border-radius: 10% 5% 5% 50%/ 5% 4% 50% 50%;
background-color: #fff;
border-left: none;
border-top:none;

手把手带咱们运用CSS画一只打打盹的小猪

border-radius: 10% 5% 5% 50%/ 5% 4% 50% 50%; 这种语法平时用的不多，咱们能够仔细研究一下。

能够看到这么处理之后，小猪的耳朵跟小猫耳朵一样，很带感。

耳朵知识点

运用 border 画三角形

height: 0;
width: 0;
border: 10px solid transparent;
border-bottom: 10px solid #000;

三角形能够大略模拟大部分动物的耳朵了。

眼睛

小猪的眼睛是最容易的部分了：两个小圆点。

相信咱们平时开发的时候都写吐了，思路便是一个正方形加上 border-radius: 50% 就能够实现圆形了。

手把手带咱们运用CSS画一只打打盹的小猪

眼睛能够放下面一点，这个位置仍是很有说法的，会显得更 Q 些。

鼻子

猪鼻子是小猪的魂灵了，要不说我还认为这是只猫呢（尽管原本是想画猫的T T）。

猪鼻子这儿能够运用一个大椭圆+两个小椭圆来处理，其中两个小椭圆咱们能够运用 伪元素 给它加上去（又是一个细节）。

手把手带咱们运用CSS画一只打打盹的小猪

打盹动画

这儿简略的运用了 CSS3 中的动画作用。

咱们将圆圆的眼睛变为一条线，视觉视点来看就好像它睡着了一样。时间咱们能够给的长一些，体现出一种“昏昏欲睡”的感觉，是不是像极了上课打打盹的你了。这儿能够运用 infinite 来实现动画的 继续播映 。

 @keyframes eyes {
      from {
        border-radius: 50%;
        height: 8px;
      }
      to {
        border-radius: 0;
        height: 4px;
      }
}

打盹知识点

animation 运用到的特点值

值 说明
animation-name 指定要绑定到选择器的关键帧的称号
animation-duration 动画指定需求多少秒或毫秒完结
animation-iteration-count 界说动画的播映次数。
animation-play-state 指定动画是否正在运行或已暂停。

infinite

infinite 设置后能够让动画循环播映。

结束语

这是第三次测验运用 css 画动物，总的来说仍是需求加强一下基础，想要认真画好一只小动物也不容易，需求不断的打磨、调整，最终才能画出自己满意的著作，css 仍是咱们需求注重的知识。