对应的html结构如下：
我们分别来看一下。 首先是最简单的耳眼影（电极），只有两个圆圈。 只要border-radius属性与宽度和高度相同css3画半圆，就可以绘制两个圆，然后使用定位属性来找到位置。
/*画一个圆*/
。眼睛{
背景：#4E4700；
宽度：23px；
高度：23px；
边框半径：23px；
/*查找位置*/
.左眼{
位置：绝对；
左：38px；
顶部：44px；
由于 CSS border-radius 属性将元素的外边框设置为圆角，因此使用半径来定义矩形。 当一个单元的四个角都是四分之一圆弧时，它们可以形成一个圆。
然后是下半部分的各种半圆球和按钮。 如何画半圆？ 上面的中心是通过四个四分之一圆弧绘制的。 不是只要两个半圆就可以了吗？
没错，当 border-radius 属性有四个值时，会按顺时针方向指定四个角：左上、右上、右下、左下。 我们让里面的两个为0，下面的为圆的半径，让高等于直径，就可以画一个半圆了。
。球{
边框半径：0 0 200px 200px；
宽度：200px；
高度：100px；
背景：#FF0000；
其余的可以类推。 只需制作精灵球的按钮，然后使用z-index使它们分层显示即可。 代码如下：
。腰带{
/* 绘制黑带 */
背景：#322221；
边框半径：0 0 2px 2px/0 0 15px 15px；
显示：柔性；
调整内容：居中；
。锁{
/*画一个半圆*/
边框半径：0 0 80px 80px；
.lock::之后{
/*使用伪元素在css中添加代码，不影响HTML结构的可读性*/
内容： ””;
显示：块；
边框半径：0 0 60px 60px；
背景：#FDFDFD；
变换：translateX(10px)； -webkit-transform：translateX（10px）； -moz-变换：translateX（10px）； -o-变换：translateX(10px)；
/*剩下的两个半圆方法我就不细说了*/
剩下的部分有点棘手css3画半圆，因为眼睛和鼻子的弧线较多，但如果我们将弧线视为椭圆的边缘，也可以借助 border-radius 属性来解决。 当我们使用两组值时，我们可以设置边框的弧度。形状如下
边框半径：20px 20px 20px 20px /
70 像素 70 像素 20 像素 20 像素；
斜杠后面的四个值是从左上开始顺时针画圆的x，后面的四个值是对应的y，这样就可以调整元素画出近似的圆弧。
.ear.left{
背景：#ffe000；
宽度：40px；
高度：90px；
边框半径：20px 20px 20px 20px/70px 70px 20px 20px；
/*隐藏眼尖溢出部分*/
溢出：隐藏；
得出的治疗效果是这样的
然后给他添加一个after伪元素来画鼻尖
.ear.left::之后{
内容： ””;
显示：块；
宽度：30px；
高度：20px；
背景：#4E4700；
让它像这样
然后使用transform将原来的.ear.left旋转一个角度。 Rotate是旋转，deg是角度的单位，负号代表逆时针选择。
旋转（-30度）； -webkit-transform：>旋转（-30度）； -moz-变换：>旋转（-30度）； -o-变换：>旋转（-30度）；
然后眼睛也很相似。 左半唇和右半唇分别是仅具有左下角和右下角的元素。 旋转后，可以使用绝对定位将它们放在一起。
画一个黄色椭圆作为高光部分。 方法就是综合其中所涉及的东西。
。光{
背景：#FFD7C9；
宽度：20px；
高度：27 像素；
边框半径：10px 10px 10px 10px/15px 15px 10px 10px；
变换：旋转（45度）； -webkit-transform：旋转（45度）； -moz变换：旋转（45度）； -o-变换：旋转（45度）；
然后你就完成了。
点击阅读原文会跳转到我的github源码。 如果您有兴趣，可以下载参考。 如果你点击一颗星那就太好了。
参考文章
结尾
发表评论