「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」
有趣的前端css特效-大眼仔
爱看动画片的朋友应该对上面这张图片里 绿色的小小的呆萌又可爱的独眼小怪兽比较眼熟，没错啦！它就是《怪兽电力公司》中的主角之一 大眼仔麦克。
那么今天我们就来复刻一个纯css版的大眼仔吧
1. 搭建框架
按照惯例，一个页面画一个效果。那么主框架就是body。在body中添加div来作为大眼仔的搭载容器。将背景色设置成稍微嫩嫩点的颜色，更加突出大眼仔的呆萌感。
代码如下：
<body>
<div></div>
</body>
<style>
body{
position: relative;
background: #eeee84; //背景色
}
</style>
2. 绘制人物
2.1 恶魔角
首先将恶魔角作为主容器显示的内容，并以它的大小作为容器大小来屏幕居中。
div {
position: absolute;
left: 50%;
top: 50%;
width: 150px;
height: 90px;
margin-left: -75px;
margin-top: -155px;
}
细节调整：
先使用box阴影绘制一个类似天线的样子。
代码入下
box-shadow: 0 30px 3px 1px #ffe4c4, 0 18px 0 4px #555;
这里可以看到 新增的阴影部分围绕在主框架div的下侧。
这是由box-shadow的属性值决定的。
box-shadow 值解析如下：
box-shadow: x轴偏移量 y轴偏移量 模糊距离 阴影大小 颜色 inset（从外层的阴影开始改变内侧阴影）;
多个值时使用逗号连接。
那么就得到了这样一个由白色和灰黑组成的天线形状啦
要使它看起来像个角角，就要派上另外一个重要的属性了。border-raduis。
代码如下：
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
注: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。
得到下图
目前形状类似连接的长牛角。虽然看起来不太像恶魔角，但是不要慌。接下来继续绘制大眼仔的脑袋。
2.2 绘制大眼仔的脑袋
同样还是使用伪类元素
div:before, div:after {
display: block;
content: '';
position: absolute;
}
这里将主体设置成一个椭圆形，形式鸡蛋。
div:before {
width: 200px;
height: 220px;
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
margin-left: -100px;
top: 45px;
left: 50%;
background-color: #9acd32; //设置底色
background-repeat: no-repeat;
}
得到一个绿毛的恶魔蛋。
大脑袋画上之后牛角瞬间就变成恶魔角啦。
下面绘制大眼及脸部轮廓阴影
background-image:
radial-gradient(circle,white 50%,transparent 50%),//眼珠亮点
radial-gradient(circle,#444 50%,transparent 50%),//眼瞳中心
radial-gradient(circle,#20b2aa 30%,rgba(34,139,34,0) 80%),//眼瞳内圈
radial-gradient(circle,#444 50%,transparent 50%),//眼瞳外圈
radial-gradient(ellipse,white 35%,#ddd 60%,transparent 60%),//大眼白
radial-gradient(ellipse,#333 45%,#9acd32 55%,#9acd32 60%,transparent 60%),//眼圈美瞳线加阴影
radial-gradient(ellipse,rgba(34,139,34,0.9) 45%,#9acd32 55%,#9acd32 60%,transparent 60%),//双眼皮褶皱
radial-gradient(ellipse,#9acd32 55%,rgba(34,139,34,0.5) 56%,rgba(34,139,34,0) 63%),//下眼皮阴影部分
radial-gradient(circle,rgba(34,139,34,0) 30%,rgba(34,139,34,0.6) 60%);//脸轮廓阴影
background-size: 8px 8px,20px 20px,25px 25px,50px 50px,110px 95px,120px 110px,130px 110px,115px 95px,250px 260px;
background-position: 53% 57px,center 59px,49% 59px,center 45px,center 25px,center 13px,center -2px,center 35px,0 -40px;
这一步绘制好以后是不是看起来就有些呆萌了呢。 继续加油吧
2.2 绘制嘴巴部分
首先设置好嘴巴的大小，并居中显示。毕竟不能是个歪嘴嘛，嘻嘻
div:after {
width: 70px;
height: 40px;
margin-left: -35px;
left: 50%;
top: 185px;
background-repeat: no-repeat;
}
然后来绘制它的小嘴巴
background: #444;//口腔内部颜色
background-image:
radial-gradient(ellipse,white 50%,transparent 50%),//牙齿1
radial-gradient(ellipse,white 50%,transparent 50%),//牙齿2
radial-gradient(ellipse,white 50%,transparent 50%),//牙齿3
radial-gradient(ellipse,white 50%,transparent 50%),//牙齿4
radial-gradient(ellipse,rgba(255,255,255,0.2) 50%,transparent 50%);//舌头
background-size: 25px 18px,25px 18px,25px 18px,25px 18px,56px 30px;
background-position: -5px 30px,15px 32px,35px 32px,55px 28px,center 20px;
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
box-shadow: 0 6px 0 #9acd32, 0 15px 3px -4px rgb(34 139 34 / 90%);//下嘴唇及阴影
当当当~~~~
大眼仔完工，成品效果如下，看起来还挺乖。嘿嘿嘿~
