CSS 带你到空调房里吃西瓜

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

枯藤老树昏鸦，空调WiFi西瓜，这是炎炎夏日里的三大保命神器。前几天，在不花钱的前提下，我给小明安装了一个空调了，可小明得寸进尺，今天又提出了一个需求，说想吃西瓜，好吧，那就安排上，让小明待在空调房里吃西瓜。

企业微信截图_20220606090734.png

空调的实现方式就不在这重复讲了，有兴趣可以看：炎炎夏日，CSS给你开个空调，带来一丝凉爽

西瓜头

西瓜头比较难实现的是在不规则的西瓜纹路上，但是这不规则的纹路，目前我还没什么好办法，只能先让它这个瓜是个规则的纹路，如果有好的实现方式，请评论留言。既然是实现规则的纹路，就比较好做了，通过几个大小、颜色不一样的椭圆形进行重叠，漏出的部分就是纹路了。

 <div class="head">
	 <div class="head-1"></div>
	 <div class="head-2"></div>
	 <div class="head-3"></div>
 </div>
复制代码

.head{
    position: relative;
    width: 180px;
    height: 150px;
    background-color: #3A7E38;
    border-radius: 60%;
}
.head-1{
    position: absolute;
    left: 20px;
    top: 0px;
    width: 140px;
    height: 140px;
    background-color: #C5E050;
    border-radius: 70px;;
}
.head-2{
    position: absolute;
    left: 50px;
    top: 0px;
    width: 80px;
    height: 100px;
    background-color: #3A7E38;
    border-radius: 60%;
}
.head-3{
    position: absolute;
    left: 70px;
    top: 0px;
    width: 40px;
    height: 100px;
    background-color: #C5E050;
    border-radius: 60%;
}
复制代码

脸部

脸部实现比较简单，通过div，再设置 border-bottom-left-radius 和 border-bottom-right-radius ，让脸型看起来没那么四四方方，再定位眼睛、眼珠子、腮红、嘴巴的位置。腮红通过伪类元素实现。

<div class="face">
	<div class="eye eye-1"><span></span></div>
	<div class="eye eye-2"><span></span></div>
	<div class="mouth"></div>
</div>
复制代码

.face{
    position: absolute;
    bottom: 5px;
    left: 15px;
    width: 150px;
    height: 80px;
    background-color: #FFEBD6;
    border-radius: 40px;;
    border-bottom-left-radius: 45%;
    border-bottom-right-radius: 45%;
}
.eye{
    position: absolute;
    top: 20px;
    width: 20px;
    height: 8px;
    border-radius: 60%;
    border: 2px solid #000;
    background-color: #fff;
}
.eye span{
    position: absolute;
    left: 6px;
    width: 9px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
}
.eye-1{
    left: 40px;
}
.eye-1::after{
    content: '';
    position: absolute;
    top: 8px;
    left: -10px;
    width: 20px;
    height: 8px;
    background-color: #FFA599;
    border-radius: 60%;
}
.eye-2::after{
    content: '';
    position: absolute;
    top: 8px;
    left: 10px;
    width: 20px;
    height: 8px;
    background-color: #FFA599;
    border-radius: 60%;
}
.eye-2{
    left: 90px;
}
.mouth{
    position: absolute;
    left: 65px;
    bottom: 30px;
    width: 20px;
    height: 10px;
    border-bottom: 1px solid #000;
    border-radius: 80%;
}
复制代码

西瓜

西瓜分为瓜皮、瓜肉、皮肉之间、西瓜籽以及被咬的部分。瓜皮、瓜肉、皮肉间就用三个不同大小的半圆叠起来。

<div class="xigua">
	<div class="xigua-1"></div>
	<div class="xigua-2"></div>
	<div class="xigua-3"></div>
	<div class="xigua-4"></div>
	<div class="xigua-5"></div>
	<div class="xiguazi xiguazi-1"></div>
	<div class="xiguazi xiguazi-2"></div>
	<div class="xiguazi xiguazi-3"></div>
</div>
复制代码

.xigua{
    position: relative;
    top: -25px;
    width: 100px;
    height: 50px;
    z-index: 2;
}
.xigua-1{
    width: 100px;
    height: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background-color: #308535;
}
.xigua-2{
    position: absolute;
    top: 0;
    left: 5px;
    width: 90px;
    height: 45px;
    border-bottom-left-radius: 45px;
    border-bottom-right-radius: 45px;
    background-color: #c5f7c8;
}
.xigua-3{
    position: absolute;
    top: 0;
    left: 8px;
    width: 84px;
    height: 42px;
    border-bottom-left-radius: 42px;
    border-bottom-right-radius: 42px;
    background-color: #FE5756;
}
.xigua-4{
    position: absolute;
    top: 0;
    left: 40px;
    width: 20px;
    height: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #FFEBD6;
}
.xigua-5{
    position: absolute;
    top: 0;
    left: 60px;
    width: 12px;
    height: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: #FFEBD6;
}
.xiguazi{
    position: absolute;
    width: 3px;
    height: 5px;
    background-color: #000;
}
.xiguazi-1{
    left: 30px;
    top: 10px;
}
.xiguazi-2{
    left: 70px;
    top: 15px;
}
.xiguazi-3{
    left: 50px;
    top: 20px;
}
复制代码

坐着的腿

腿就有点难度了，坐着的时候，腿不能简单的用一个div实现，因为大腿会比较粗，小腿比较细，两头大小是不一样的。这里实现方式用的是两头用两个大小不同的半圆，再同div填充中间的距离，旋转到合适的角度。

<div class="legs-right">
	<div class="legs-left-1"></div>
	<div class="legs-left-2"></div>
	<div class="legs-left-3"></div>
	<div class="legs-left-4"></div>
</div>
复制代码

.legs{
    position: absolute;
    top: 25px;
    left: 15px;
    width: 70px;
    height: 20px;
    background-color: blue;
    border-radius: 10px;
    z-index: 1;
}
.legs-left{
    position: relative;
    top: -12px;
    left: 14px;
    width: 100px;
    transform: rotate(20deg);
    z-index: 2;
}
.legs-right{
    position: relative;
    top: 7px;
    left: -4px;
    width: 100px;
    transform: rotate(-180deg);
    z-index: 1;
}
.legs-left-1{
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 30px;
    background:blue;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    border: 2px solid #000;
    z-index: 1;
}
.legs-left-2{
    position: absolute;
    left: 40px;
    top: 0px;
    width: 10px;
    height: 20px;
    background:blue;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    border: 2px solid #000;
    z-index: 1;

}
.legs-left-3{
    position: absolute;
    left: 12px;
    top: 0px;
    width: 31px;
    height: 20px;
    background:blue;
    z-index: 2;
    border-top: 2px solid #000;
}
.legs-left-4{
    position: absolute;
    left: 14px;
    top: 17px;
    width: 30px;
    height: 10px;
    background:blue;
    z-index: 2;
    border-bottom: 2px solid #000;
    transform: rotate(-20deg);
}
复制代码

总结

在这个吃瓜小男孩的实现过程中，难度主要在一些细节方面，包括西瓜纹路如何实现，圆角的利用如何更自然，腿部两头大小不一样能怎么更简单的表示出来等。通过完成这样一个案例，也对自己的css能力有所提升。

码上掘金

https://code.juejin.cn/pen/7105924915328450596