Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

draw

Now there are ice cream, ice cream, etc., but the memory of white Popsicle is still very deep. Here, for color, I choose mung bean Popsicle painting.

The container

<div class="popsicle"></div>
Copy the code

To draw a green Popsicle, we prepare a div element, and then it will be transformed.

style

We need to prepare: ice and popsicles, and then combine into popsicles.

ice

The ice is made up of two parts, the ice itself and the dark strip.

The width to height ratio of the ice is 1:1.7, 10% of which is white, and the rest is green. The part of 0.5 times of width and height is treated with radians

.popsicle {
    --w: 100px;
    --c1: #9db328;
    --c2: #fdfdfd;
    --c3: #5a5757;
    --c4: #eebc6c;
    width: var(--w);
    height: calc(var(--w) * 1.7);
    background: linear-gradient(to bottom, var(--c1) 90%.var(--c2) 90%);
    border-radius: 50% 50% 5% 5%/calc(var(--w) * 0.5) calc(var(--w) * 0.5) 5% 5%;
    box-shadow: 0 0 calc(var(--w) * 0.05) var(--c3);
    position: relative;
}
Copy the code

It looks a little bit like this first, we add the dark bar, before that, we give the dark bar and Popsicle a common style:

It is 0.2 times wider than the ice cube

.popsicle::before..popsicle::after {
    content: ' ';
    position: absolute;
    width: calc(var(--w) * 0.2);  
}
Copy the code

Dark bar style:

.popsicle::before {
    background-color: rgba(0.0.0.2);
    border-radius: 50%/calc(var(--w) * 0.1);
    height: var(--w);
    left: calc(var(--w) * 0.2);
    top: 25%;
    box-shadow: calc(var(--w) * 0.4) 0 0 rgba(0.0.0.2);
}
Copy the code

Look at this time is not more clear, then we make persistent efforts.

lolly

This effect is achieved using pseudo-elements as follows:

.popsicle::after {
    height: calc(var(--w) * 0.8);
    background: linear-gradient(to bottom, rgba(0.0.0.2) 20%, transparent 20%), linear-gradient(to bottom, var(--c4), var(--c4));
    border-radius: 0 0 50% 50%/0 0 calc(var(--w) * 0.1) calc(var(--w) * 0.1);
    left: 50%;
    bottom: calc(var(--w) * -0.8 + var(--w) * 1.7 * 0.06);
    transform: translateX(-50%);
}
Copy the code

conclusion

The size of popsicles adaptively changes with the change of — W. We should pay attention to the width and height ratio of popsicles and ice cubes, otherwise it will be a bit obtuse. Of course, if you want popsicles of other colors, you only need to modify the color variable.

For other animation effects, head over to the Funny Animation column, which I hope will help you.