我正在参加「初夏创意投稿大赛」详情请看:初夏创意投稿大赛
枯藤老树昏鸦,空调WiFi西瓜,这是炎炎夏日里的三大保命神器。前几天,在不花钱的前提下,我给小明安装了一个空调了,可小明得寸进尺,今天又提出了一个需求,说想吃西瓜,好吧,那就安排上,让小明待在空调房里吃西瓜。
空调的实现方式就不在这重复讲了,有兴趣可以看:炎炎夏日,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能力有所提升。