画虚线圆角边框_如何用CSS画一只皮卡丘

引言

不知道大家有没有去看大侦探皮卡丘呀，有没有被银幕上毛茸茸的电老鼠萌到呢？现在我就来教大家用CSS画一只简易版的皮卡丘吧，小白可学。(希望不会收到东半球最强法务部的律师函)

ps：以下部分代码隐去具体的宽高和位置，具体代码在阅读原文可看。

废话不多说，让我们打开编辑器

   

html对应结构如下：

我们分开来看，首先是最简单的眼睛和腮红(电极)，只有两个圆，只要让border-radius属性和width、height相同就可以画出两个圆，再用定位属性去寻找位置。

/*画出圆*/

.eye{

    background: #4E4700;

    width: 23px;

    height: 23px;

    border-radius: 23px;

}

/*寻找位置*/

.eye.left{

    position: absolute;

    left:38px;

    top:44px;

}

因为CSS的border-radius属性设置元素的外边框圆角，使用一个直径来确定一个圆形。当元素四个边角都是四分之一圆弧，那就可以拼成一个圆。

然后就是下半截的各类半圆形的球，扣子。半圆怎么画呢，上面的圆通过四个四分之一圆弧来画，半圆岂不只要两个？

没错，当border-radius属性有四个值的时候，就会按左上、右上、右下、左下的顺时针方向去指定四个角。我们让上面的两个都是0，下面的都是圆的直径，再让高度等于半径，就可以画出一个半圆啦。

.ball{

    border-radius:0 0 200px 200px;

    width:200px;

    height:100px;

    background:#FF0000;

}

其他的以此类推，把精灵球的扣子也做出来，再用z-index来让他们按层次出现就好啦，代码如下：

.belt{

    /*画黑带*/

    background:#322221;

    border-radius:0 0 2px 2px/0 0 15px 15px;

    display: flex;

    justify-content: center;

}

.lock{

    /*画半圆*/

    border-radius: 0 0 80px 80px;

}

.lock::after{

    /*使用伪元素可以在css里添加代码而不影响HTML结构的可读性*/

    content: "";

    display:block;

    border-radius: 0 0 60px 60px;

    background:#FDFDFD;

    transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px);

}

/*剩下的两个半圆方法差不多就不赘述了*/

剩下的部分就有点棘手了，因为耳朵和嘴巴弧线部分比较多，不过我们把弧线看作椭圆的边的话，也是可以利用border-radius属性来解决。当我们使用两组值的时候就可以设置边框的弧度。形如

border-radius: 20px 20px 20px 20px /
                       70px 70px 20px 20px;

斜杠前面的四个值，分别是左上起顺时针一圈的x,后面的四个值就是对应的y，这样就可以调整元素画出大概的弧度。

.ear.left{

    background: #ffe000;

    width:40px;

    height:90px;

  border-radius: 20px 20px 20px 20px/70px 70px 20px 20px;

    /*隐藏耳朵尖溢出部分*/

    overflow: hidden;

}

画出的效果是这样的

然后给他加个after伪元素来画耳朵尖

.ear.left::after{

    content: "";

    display: block;

    width:30px;

    height:20px;

    background: #4E4700;

}

就变成这样

然后使用transform来给原来的 .ear.left 旋转一个角度就完成了，rotate是旋转，deg指角度的单位，负号代表逆时针选择。

rotate(-30deg); -webkit-transform: >rotate(-30deg); -moz-transform: >rotate(-30deg); -o-transform: >rotate(-30deg);

然后嘴巴也是大同小异，左半唇和右半唇分别是一个只有左下和右下角的元素，旋转之后使用绝对定位拼在一起就可以啦。

高光部分画个白色椭圆，方法就是把上面涉及的综合一下。

.light{

    background:#FFD7C9;

    width: 20px;

    height: 27px;

    border-radius: 10px 10px 10px 10px/15px 15px 10px 10px;

    transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);

}

接下来就大功告成。

点击 阅读原文 会跳转到我的github的源码里，有兴趣大家可以下载下来参考一下，顺手点个star就再好不过了。

参考文章

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate 

END