我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛
中秋佳节即将到，猴子也来凑热闹，想着中秋，就想到月亮；想到月亮，就想到猴子捞月的故事，自此有了猴子钓月饼的想法。这篇文章主要用CSS完成的，画了一个猴子在月下钓月饼的场景。
猴子钓月饼
俗话说，工欲善其事必先利其器。完成这个场景我们需要的有：
-
月亮 -
猴子 -
鱼竿 -
月饼
此次场景的size是1303 X 734，由于没有调自适应和响应式，有兴趣的朋友可以自己修改一下或者大家一起来探讨。下面让我们看一下我们所需的材料是什么样子的吧。
月亮
月是故乡明，此篇月亮效果主要用到了渐变效果，一个div一个月亮，实现如下：
.moon{
left: initial;
right: 5%;
--t:5%;
--w:5rem;
--h:5rem;
border-radius: 50%;
background: linear-gradient(to right bottom,yellow,#fff 75%);
box-shadow: 0.1rem 0.1rem 0.25rem #f1f1c1;
}
猴子
由于猴子是不规则形状的，所以我用CSS画的时候比较麻烦，代码比较多，主要是对CSS的border-radius属性的变形，我这边只放部分代码，需要的可以传送到 也笑的github地址 或者codepen。建议你使用canvas或者svg来画这个猴子，下面让我们看一下此篇文章是怎么做的。
DOM
不规则的猴子，用的dom也是比较多，如下：
<div class="monkey">
<div class="header">
<div class="face face1"></div>
<div class="face face2"></div>
<div class="face face3"></div>
<div class="ear right pe"></div>
<div class="eye right pe"></div>
<div class="eye left pe"></div>
<div class="nose pe"></div>
<div class="mouse"></div>
</div>
<!-- 因为猴头使用超出隐藏属性，而左耳在猴头之外，所以放此位置 -->
<div class="ear left"></div>
<div class="body pe"></div>
<div class="hand"></div>
</div>
猴子主要由：猴头、猴身、猴手臂组成，其中猴头包括了：猴脸、猴眼、猴鼻子、猴嘴巴，猴身包含了：身体、猴尾巴， 上述结构中含有类名pe的元素都添加了伪元素，这里我们给一个全局的样式，如下：
div,
.pe::after,
.pe::before{
--t:0;
--l:0;
position: absolute;
left: var(--l);
top:var(--t);
width: var(--w);
height: var(--h);
box-sizing: border-box;
}
.pe::after,
.pe::before{
content: "";
}
样式
这里只写了猴头的部分样式，详细样式可参考上述提供的传送门。因为用到了CSS的var，所以我们要给猴子定义一些变量，主要是颜色，如下：
定义变量
.monkey{
--l:10%;
--t:40%;
--w:10rem;
--h:10rem;
overflow: hidden;
--m1:#bb792f;
--m2:#2d0102;
--m3:#fed2a3;
--m4:#fff;
}
里面定义了画猴子的四种颜色，如果你需要改变猴子的颜色可以在这里修改。
猴头轮廓
/* 猴头 */
.monkey .header{
--w: 60%;
--h: 56%;
--l: 18%;
border-radius: 50% 64% 48% 53%;
background-color: var(--m1);
overflow: hidden;
z-index: 1;
}
猴脸
/* 猴脸 */
.monkey .header .face{
background-color: var(--m3);
}
.monkey .header .face1{
--l: 67%;
--w: 55%;
--h: 90%;
border-radius: 50% 64% 40% 53%;
border-top: 0.3rem solid var(--m2);
}
.monkey .header .face2{
--l: 44%;
--t: 10%;
--w: 44%;
--h: 80%;
border-radius: 50% 64% 40% 53%;
border-top: 0.25rem solid var(--m2);
transform: rotate(-78deg);
}
.monkey .header .face3{
--l: 48%;
--t: 62%;
--w: 55%;
--h: 45%;
border-radius: 50% 64% 40% 53%;
border-left: 0.2rem solid var(--m2);
transform: rotate(-28deg);
}
这里我们主要想体现对border-radius的使用，提供一个思路，你可以用它尝试着画不同的不规则形状。
鱼竿
一竿在手，天下我有。那么这个鱼竿是这样实现的，如下：
.rod{
--l: 22%;
--t: 60%;
--w: 40%;
--h: 0.3rem;
--r1:#bb792f;
--r2:#ffffef;
background-color: var(--r1);
transform: rotate(-30deg);
transform-origin: 0;
}
.rod::before{
--t:-0.1rem;
--w:35%;
--h:0.5rem;
background-color: var(--r1);
}
.rod::after{
--l: 100%;
--w: 80%;
--h: 0.02rem;
background-color: var(--r2);
transform: rotate(106deg);
transform-origin: left;
}
月饼
等了好久终于等到今天，等了好久月饼终于出现了，经典的五仁，儿童的回忆，简单往往更能让人追忆。出来吧，五仁月饼：
.cake{
--l:60%;
--t:75%;
--w:5rem;
--h:5rem;
--c1:#ce9126;
--c2:#eb9705;
--c3:#636363;
--c4:#ebb43f;
--c5:#ffff9a;
animation: _cake linear 2s infinite;
}
.cake::after{
--w: 100%;
--h: 55%;
background-color: var(--c4);
border-radius: 50%;
content: '五仁';
text-align: center;
line-height: 2.75rem;
color: var(--c5);
}
.cake .half{
--t: 30%;
--w: 100%;
--h: 60%;
background-color: var(--c1);
border-radius: 0 0 50% 50%;
box-shadow: 0.05rem 0.2rem 0.2rem var(--c3);
display: flex;
justify-content: space-around;
overflow: hidden;
}
.cake .half div{
--w:0;
--h:100%;
border-left: 0.3rem ridge var(--c1);
position: initial;
}
总结
最终的效果大家应该都在封面看到了，如果没注意也没关系，给你一个传送门：猴子钓月饼，这里看的时候鱼竿的位置可能会出现偏差。
此篇文章不仅想让你在中秋来临之际获得一个好心情，还希望在学习上对你有所帮助，在此祝福你们：中秋没烦恼，快乐永不少！。
此外，中秋你收到什么礼物了呢，可以把你的快乐分享出来。
