「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」
有趣的前端css特效-毛怪萨利
上一篇绘制的是大眼怪，这次就来更新《怪兽电力公司》的另外一个主角：毛怪萨利吧！ 毛怪萨利是一只体型庞大并长满蓝色长毛，头上有两个尖角，身上有紫色斑块，心地善良友好的怪兽。
1. 搭建框架
以body标签为主框架。在body中添加div来作为毛怪萨利的搭载容器。将背景色设置成比稍毛怪萨利颜色稍浅一些的色号。 代码如下：
<body>
<div></div>
</body>
<style>
body{
position: relative;
background: #a9f5f5; //背景色
}
</style>
2. 绘制人物
2.1 小尖角
设置小尖角并屏幕居中显示。
div {
position: absolute;
left: 50%;
top: 50%;
width: 160px;
height: 62px;
margin-left: -80px;
margin-top: -150px;
}
细节调整： 先使用box阴影绘制一个类似天线的样子。 代码如下
box-shadow: 0 7px 7px 3px #ffe4c4, 0 15px 0 10px rgb(0 0 0 / 25%), 0 15px 0 10px #ffe4c4;
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: 180px;
height: 230px;
margin-left: -90px;
top: 30px;
left: 50%;
background-color: #00ced1;//设置底色
border-radius: 50% 50% 50% 50%/60% 60% 30% 30%;
}
基础的毛怪头型就出来了，然后给头部加上阴影，使其更加立体 。
box-shadow: 0 0 20px #009c9e, 0 10px 10px #008384, inset 0 -15px 0 13px rgb(0 0 0 / 3%)
瞬间就从平面变得立体起来了。 接下来绘制面部五官。
background-image:
radial-gradient(ellipse,rgba(0,0,0,0.4) 50%,transparent 50%), //左边鼻孔
radial-gradient(ellipse,rgba(0,0,0,0.4) 50%,transparent 50%), //右边鼻孔
radial-gradient(ellipse,#00696b 50%,transparent 50%),//大鼻头
radial-gradient(circle,white 50%,transparent 50%),//左眼珠亮点
radial-gradient(circle,#444 50%,transparent 50%),//左眼瞳
radial-gradient(circle,#9370db 30%,rgba(147,112,219,0) 70%),//左边眼珠眼瞳分散颜色
radial-gradient(circle,#444 50%,transparent 50%),//左边眼珠底色
radial-gradient(ellipse,white 30%,#ddd 60%,transparent 60%),//左眼眼白部分
radial-gradient(ellipse,#333 45%,#48d1cc 55%,#48d1cc 60%,transparent 60%),//左侧眼球阴影
radial-gradient(circle,white 50%,transparent 50%),//右眼珠亮点
radial-gradient(circle,#444 50%,transparent 50%),//右眼瞳
radial-gradient(circle,#9370db 30%,rgba(147,112,219,0) 70%),//右边眼珠眼瞳分散颜色
radial-gradient(circle,#444 50%,transparent 50%),//右边眼珠底色
radial-gradient(ellipse,white 30%,#ddd 60%,transparent 60%),//右眼眼白部分
radial-gradient(ellipse,#333 45%,#48d1cc 55%,#48d1cc 60%,transparent 60%),//右侧眼球阴影
radial-gradient(ellipse,#00abad 40%,rgba(0,206,209,0) 50%),//鼻头上阴影
radial-gradient(ellipse,#009c9e 40%,rgba(0,206,209,0) 50%),//双眼圈阴影
radial-gradient(ellipse,#9370db 30%,rgba(147,112,219,0) 60%),//头上紫色斑点1
radial-gradient(ellipse,#9370db 30%,rgba(147,112,219,0) 60%),//头上紫色斑点2
radial-gradient(circle,rgba(0,206,209,0) 35%,#009c9e 65%);//脑袋底色渐变
background-repeat: no-repeat;
background-size: 20px 10px,20px 10px,75px 40px,5px 5px,13px 13px,19px 19px,34px 34px,50px 45px,54px 58px,5px 5px,13px 13px,19px 19px,34px 34px,50px 45px,54px 58px,100px 40px,170px 90px,45px 40px,45px 40px,220px 350px;
background-position: 70px 118px,90px 118px,center 95px,68px 70px,60px 71px,58px 68px,50px 60px,40px 55px,38px 47px,114px 70px,106px 71px,102px 68px,95px 60px,90px 55px,88px 47px,center 90px,center 30px,50px -17px,95px 10px,0 -80px;
呆呆的小怪兽已经接近完成啦！加油
2.2 绘制嘴巴及眉峰部分
设置好大小并居中显示。
div:after {
width: 70px;
height: 15px;
margin-left: -35px;
left: 50%;
top: 180px;
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,white 50%,transparent 50%),//牙齿5
radial-gradient(ellipse,white 50%,transparent 50%);//牙齿6
background-repeat: no-repeat;
background-size: 16px 25px;
background-position: -5px 7px,7px 4px,19px 7px,31px 7px,43px 4px,55px 7px;
border-radius: 60% 60% 40% 40%/50% 50% 50% 50%;
box-shadow: 0 6px 0 #48d1cc, 0 15px 3px -4px #009c9e, 0 -106px 6px -2px rgb(255 255 255 / 20%), -20px -114px 6px 7px #00abad, 20px -114px 6px 7px #00abad, -20px -105px 5px 5px rgb(0 0 0 / 15%), 20px -105px 5px 5px rgb(0 0 0 / 15%);//嘴巴及眉峰部分阴影
以上，小怪兽萨利就完成啦。是不是非常可爱呢！
