Welcome toTencent Cloud + community, get more Tencent mass technology practice dry goods oh ~

Author: Jiang Zhigeng | tencent TEG network engineer

I’m Paige, hum, and this is my brother George, quack, and this is my mama ho, and this is my daddy ho

background

Peppa Pig has been popular for quite a while, and I actually dismissed it at first. Throughout the history of children’s animation, whether it is jubilant, bear, bunny bing Bong, Winnie the Pooh, the fire will quickly fall after a while, there is not much precipitation in retrospect. So I refused to watch Peppa Pig at first, because you can’t let me watch peppa Pig, I went to watch it immediately, first I want to have a try. After in-depth understanding, I found, my god, there is such a world out of the dust absolutely gorgeous animation! As someone from Zhejiang said: You don’t like Peppa Pig because you don’t understand it.

The devil of the pig, willful on the mud. This is not a simple pig, from the road to powder. I bought peppa Pig stickers on Taobao, affixed social tattoos, replaced computer desktop wallpaper with peppa family photos, and bought peppa Pig action figures. But it was the Peppa Pig technique I stumbled upon that really made a positive difference in my work.

Peppa Pig debugging: During program debugging, debugging, or testing, the operator patiently explains to Peppa Pig the function of each line of program, in order to inspire inspiration and find contradictions.

“You’re lucky to love something that fits into your job. Peppa Pig tuning has boosted my productivity and mood throughout the day.” – two Bottlejiang

Many people claim to be social people are Peppa fans, in fact, most of them are passer-by fans. A fan is someone you meet in passing and become a fan, like when I get home and see my kids watching Peppa Pig. Here are three questions that might be used to determine whether you’re a fan of the street or a true fan.

1. Let’s start with an easy one. Name seven characters from Peppa Pig.

Most people can name Peppa Pig, Brother George, Father pig, Mother pig, Grandfather pig and Grandmother pig, so name the seventh one. For example, Pedro the pony, SUSIE the Lamb, Emily the elephant, Danny the dog, Candy the cat and Rebecca the rabbit.

2. Choose which of the following is peppa Pig’s opening line:

Hello I’m Peppa Pig, hum, this is my brother George, quack, this is my mama ho, this is my daddy ho

B. I’m Paige, hum, and this is my brother George, quack, and this is my mama ho, and this is my daddy ho

C. Hello I’m Peppa Pig, hum, and this is my brother George, quack, and this is my mother, hum, and this is my father, ho

D. I’m Paige, hum, and this is my brother George, quack, and this is my mother, hum, and this is my father, ho

True love fans are those who don’t even skip the beginning of the movie.

3. For the hard part, tell me the whole story of an episode.

Peppa Pig is the most popular character in the world.

I have to admit, in fact, on the above three questions to answer, I can only calculate the passer-by powder!

The pre

I found the 11-second scene of peppa Pig’s fourth season paper Plane episode in Tencent video as a painting template. Out of habit, I flipped the X-axis horizontally.

Observing this image, it can be found that Peppa Pig’s composition is basically a variety of curves, like parabola, like circle, like ellipse, like quadratic Bezier curve. It’s all about “classes”, which is the essence of Peppa Pig’s composition, a hand-drawn style rather than standard, rigid lines. In terms of front-end technology selection, SVG and Canvas come to mind first for drawing, but they are good at drawing themselves, and there are online tools to edit SVG, which is not interesting, I think Page will not allow it. So I wanted to do it with pure CSS, which is more challenging, because drawing curves is not what CSS is good at.

The difficulties in

CSS cannot draw curves directly. The way to save the country by curves is border-radius. The rest of the painting revolves around this property.

The use of border-radius usually uses a specific pixel to control the size of the rounded corner, such as border-radius:5px; You can also specify horizontal and vertical radii separately, separated by “/”, and accept length values or percentages. border-radius:5px; Border-radius: 5px 5px 5px 5px 5px/ 5px 5px 5px 5px 5px 5px 5px. This is the top left horizontal radius, top right, bottom right, bottom left, /, top left vertical radius, top right, bottom right, bottom left.

draw

Pig head

Once you understand the use of border-radius, you can start to play. The pig’s head was pieced together by dividing the lines into sections as shown below, paying attention to the layers and filling the image with a white background and a pink background. The difficulty lies in setting the border-radius parameter for the large header profile. The general drawing steps are as follows:

  1. Draw ellipse;
  2. Adjust the border-radius parameter;
  3. Color;
  4. Adjustable Angle;
  5. Layer cover added.

Pig head outline style code:

    position: absolute;
    z-index: 100;
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    top: 100px;
    left: 100px;
    border-radius: 92% 50% 50% 50%/ 87% 80% 68% 50%;
    border: 6px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(30deg);
    transform-origin: left top;Copy the code

Three semi-ellipses can be superimposed in turn ~ the same layer cover to achieve.

Five limbs

In fact, basically draw here to the use of border-radius is very skilled, the parameter setting is probably clear, the rest of the workload is also a problem.

fit

The rest of the drawing method is similar, the placement of facial features should pay special attention to the proportion and size, for example, the body is easy to become a fat page/thin page because of the size is not appropriate, here can use Photoshop ruler. At the same time, use the color picker to get the color of each part of the page. The next step is the overall debugging, for me at the level of painting chicken peck rice, this is the most difficult.

<div class="pig_container"> <! -- tail --> <div class="tail_left"></div>
    <div class="tail_right"></div>
    <div class="tail_blank"></div>
    <div class="tail_middle"></div>
    <div class="tail_circle"></div> <! -- Bottom shadow --> <div class="pig_shadow"></div> <! -- left foot --> <div class="left_foot"></div>
    <div class="left_foot right_foot"></div> <! -- left shoe --> <div class="left_shoes"></div>
    <div class="left_shoes right_shoes"></div> <! <div> <div class= left hand"hand_left_top"></div>
        <div class="hand_left_bottom"></div>
        <div class="hand_left_middle"></div> </div> <! -- body --> <div class="pig_body_bottom"></div> <! -- right hand --> <div> <div class="hand_right_top"></div>
        <div class="hand_right_bottom"></div>
        <div class="hand_right_middle"></div> </div> <! --> <div> <! -- ear --> <div class="ear_left"></div>
        <div class="ear_right"></div>
        <div class="pig_head">
            <div class="pig_head_white_left_bottom"></div>
            <div class="pig_head_white_left_top"></div> </div> <! --> <div class="pig_nose"></div> <! --> <div class="pig_jaw"></div>
        <div class="pig_jaw_right"></div>
        <div class="pig_nose_bottom"></div> <! -- nostrils --> <div class="nose_kong_left"></div>
        <div class="nose_kong_right"></div> <! -- left eye --> <div class="left_eye">
            <div class="left_eye_bg"></div>
            <div class="left_eye_ball"></div>
            <div class="left_eye_border"></div> </div> <! -- right eye --> <div class="right_eye">
            <div class="right_eye_bg"></div>
            <div class="right_eye_ball"></div>
            <div class="right_eye_border"></div> </div> <! -- mouth --> <div class="mouth">
            <div class="mouth_bottom"></div>
            <div class="mouth_middle"></div>
            <div class="mouth_top"></div> </div> <! -- cheek --> <div class="face"></div>
    </div>
</div>Copy the code

The final combination is as follows:

Compare it with the template

Which one is the real Paige?

The last

Demo effect here! www.doverr.com/peppa.html

Question and answer


How do I validate CSS color names?


reading


CSS3 animation – Parabolic motion


Click to enlarge the CSS training image


9 unique CSS background visuals

Has been authorized by the author tencent cloud + community release, the original link: https://cloud.tencent.com/developer/article/1128472?fromSource=waitui