手把手带大家使用CSS画一只打瞌睡的小猪

1,222 阅读4分钟

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

前言

春困、夏倦、秋乏、冬眠,今天给大家分享的是:使用 CSS 画一只打瞌睡的小猪,本文会带大家手把手实现这个效果。

码上掘金

思路解析

脑阔

首先就是小猪的脑袋了,这里我们用的是 border-radius 属性来处理,我们可以将小猪的脑袋上下部分分别使用不同的弧度来使小猪看着不那么生硬。

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

1.PNG

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

脑阔知识点

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;

2.PNG

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% 就可以实现圆形了。

3.PNG

眼睛可以放下面一点,这个位置还是很有说法的,会显得更 Q 些。

鼻子

猪鼻子是小猪的灵魂了,要不说我还以为这是只猫呢(虽然原本是想画猫的T T)。

猪鼻子这里可以使用一个大椭圆+两个小椭圆来处理,其中两个小椭圆我们可以使用 伪元素 给它加上去(又是一个细节)。

捕获.PNG

瞌睡动画

这里简单的使用了 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 仍是我们需要注重的知识。