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.