I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

The Mid-Autumn Festival is coming, monkeys also join in the fun, thinking about the Mid-Autumn festival, think of the moon; Thinking of the moon, I think of the story of the monkey fishing for the moon, from which came the idea of the monkey fishing for mooncakes. This article is mainly completed with CSS, drawing a scene of a monkey fishing mooncakes under the moon.

Monkey Fishing mooncake

As the saying goes, to do a good job, you must first sharpen your tools. To complete this scenario we need:

• The moon

• monkey

• Fishing rod

• The moon cake

The size of this scene is 1303 X 734. Since there is no adaptive and responsive tuning, interested friends can modify it by themselves or discuss it together. Let’s take a look at what the materials look like.

The moon

The moon is the hometown of Ming, this moon effect mainly used the gradient effect, a div a moon, the implementation is as follows:

.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.1 rem 0.1 rem 0.25 rem #f1f1c1;
}
Copy the code

monkey

Because the monkey is irregular shape, it is troublesome for me to draw with CSS, and there are many codes, mainly for the deformation of the BORDER-radius attribute of CSS. I only put part of the code here, and what I need can be sent to the github address or codepen. It is recommended that you use canvas or SVG to draw the monkey. Let’s take a look at how this article does it.

DOM

Irregular monkeys also use more DOM, as follows:

<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>
    <! -- Put it in this position because the left ear is outside of the head and uses the beyond Hide attribute -->
    <div class="ear left"></div>
    <div class="body pe"></div>
    <div class="hand"></div>
</div>
Copy the code

The monkey is mainly composed of monkey head, monkey body and monkey arm. The monkey head includes monkey face, monkey eyes, monkey nose and monkey mouth. The monkey body includes body and monkey tail.

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: "";
}
Copy the code

style

Only part of the style of the monkey head is written here. For details, please refer to the portal provided above. Since CSS var is used, we need to define some variables for the monkey, mainly color, as follows:

Define variables

.monkey{
    --l:10%;
    --t:40%;
    --w:10rem;
    --h:10rem;
    overflow: hidden;
    --m1:#bb792f;
    --m2:#2d0102;
    --m3:#fed2a3;
    --m4:#fff;
}
Copy the code

It defines the four colors of the monkey. If you need to change the color of the monkey, you can change it here.

Hedgehog outline

/ * this * /
.monkey .header{
    --w: 60%;
    --h: 56%;
    --l: 18%;
    border-radius: 50% 64% 48% 53%;
    background-color: var(--m1);
    overflow: hidden;
    z-index: 1;
}
Copy the code

Monkey’s face

/ * * / monkey face
.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.3 rem solid var(--m2);
}
.monkey .header .face2{
    --l: 44%;
    --t: 10%;
    --w: 44%;
    --h: 80%;
    border-radius: 50% 64% 40% 53%;
    border-top: 0.25 rem 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.2 rem solid var(--m2);
    transform: rotate(-28deg);
}
Copy the code

Here we mainly want to illustrate the use of border-radius and provide an idea that you can use to try to draw different irregular shapes.

Fishing rod

A pole in hand, the world I have. So this fishing rod is implemented like this:

.rod{
    --l: 22%;
    --t: 60%;
    --w: 40%;
    --h: 0.3 rem;
    --r1:#bb792f;
    --r2:#ffffef;
    background-color: var(--r1);
    transform: rotate(-30deg);
    transform-origin: 0;
}
.rod::before{
    --t:-0.1 rem;
    --w:35%;
    --h:0.5 rem;
    background-color: var(--r1);
}

.rod::after{
    --l: 100%;
    --w: 80%;
    --h: 0.02 rem;
    background-color: var(--r2);
    transform: rotate(106deg);
    transform-origin: left;
}
Copy the code

The moon cake

Waited for a long time finally wait for today, waited for a long time moon cakes finally appeared, classic five benevolence, children’s memories, simple often more can let a person recall. Come out, five kernel mooncakes:

.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: 'five ren';
    text-align: center;
    line-height: 2.75 rem;
    color: var(--c5);
}
.cake .half{
    --t: 30%;
    --w: 100%;
    --h: 60%;
    background-color: var(--c1);
    border-radius: 0 0 50% 50%;
    box-shadow: 0.05 rem 0.2 rem 0.2 rem var(--c3);
    display: flex;
    justify-content: space-around;
    overflow: hidden;
}
.cake .half div{
    --w:0;
    --h:100%;
    border-left: 0.3 rem ridge var(--c1);
    position: initial;
}
Copy the code

conclusion

The final result should be seen on the cover, if you haven’t noticed, there is a portal for you: Monkey fishing mooncakes, here you can see the position of the fishing rod may be wrong.

This article not only want to let you in the Mid-Autumn festival approaching to get a good mood, but also hope to help you in learning, in this wish you: Mid-Autumn festival no worries, happy forever many! .

Besides, what gifts have you received on Mid-Autumn Festival? You can share your happiness.