Feel the fun of summer by making an ice cream yourself

I am participating in the "Early Summer Creative Contest" for details, please see: Early Summer Creative Contest

The summer is very hot, and there are cool and delicious foods such as watermelon and ice cream. Today we will work together to realize an ice cream handle. Before that, let's take a look at the final effect:

Implementation process

The process of realizing ice cream is as follows:

1. Define dom, the container contains 2 elements, ice-lollyused to draw the entire ice cream area, flavorsice cream, stickis the ice cream area.

<div class="ice-lolly">
    <div class="flavors"></div>
    <div class="stick"></div>
</div>
复制代码

2. Then center the body for easy display

# 内容居中显示
body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    //background-color: darkslategray;
}
复制代码

3. Draw the shape of the popsicle: .flavors, the size and width can be adjusted, and the popsicle can border-radiusbe setting to make the ice cream more round.

.flavors {
    width: 19em;
    height: 26em;
    font-size: 10px;
    border-radius: 8em 8em 1em 1em;
}
复制代码

4. Color the popsicles: .flavors,.flavors::before

.flavors {
    position: relative;
    overflow: hidden;
}
.flavors::before {
    content: '';
    position: absolute;
    width: 140%;
    height: 120%;
    background: linear-gradient(
        hotpink 0%,
        hotpink 25%,
        deepskyblue 25%,
        deepskyblue 50%,
        gold 50%,
        gold 75%,
        lightgreen 75%,
        lightgreen 100%);
    z-index: -1;
    left: -20%;
    transform: rotate(-25deg);
}
复制代码

5. Add lighting effects:.flavors::after

.flavors::after {
    content: '';
    position: absolute;
    width: 2em;
    height: 17em;
    background-color: rgba(255, 255, 255, 0.5);
    left: 2em;
    bottom: 2em;
    border-radius: 1em;
}
复制代码

6. Draw popsicle chopsticks:.stick

.stick {
    position: relative;
    width: 6em;
    height: 8em;
    background-color: sandybrown;
    left: calc(50% - 6em / 2);
    border-radius: 0 0 3em 3em;
}
复制代码

7. Add a little shadow to the popsicle chopsticks to increase the three-dimensional effect:.stick::after

stick::after {
    content: '';
    position: absolute;
    width: inherit;
    height: 2.5em;
    background-color: sienna;
}
复制代码

8. The popsicles roll in color .flavors::before, more vivid

.flavors::before {
    animation: moving 100s linear infinite;
}
复制代码

9. Mouse floating and stop animation .ice-lolly:hover, let the ice cream have a simple animation effect

.flavors::before {
    animation-play-state: paused;
}
.ice-lolly:hover .flavors::before {
    animation-play-state: running;
}
复制代码

Finally, after completing the development of the entire ice cream, have you felt the coolness in the summer heat?

see the effect

We can display it through the 马上掘金function , it not only supports the writing of css + html, but also supports the trial operation, which is very convenient. The effect is as follows:

References

• github.com/comehope/fr…