How to use pure CSS to achieve the animation effect of popsicles (with code)-CSS Tutorial-php.cn

How to use pure CSS to achieve the animation effect of popsicles (with code)

不言

Release： 2018-08-22 10:50:51

Original

2421 people have browsed it

The content of this article is about how to use pure CSS to realize the animation effect of popsicles (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect preview

How to use pure CSS to achieve the animation effect of popsicles (with code)

Source code download

https://github.com/comehope/front-end-daily-challenges

Code Interpretation

Define dom, the container contains 2 elements:

<div>
    <div></div>
    <div></div>
</div>

Copy after login

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkslategray;
}

Copy after login

Draw the shape of the popsicle:

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

Copy after login

Color the popsicles:

.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);
}

Copy after login

Add a little lighting effect:

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

Copy after login

Draw the popsicle chopsticks:

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

Copy after login

Add a little shadow to the popsicle chopsticks to increase the three-dimensionality:

.stick::after {
    content: '';
    position: absolute;
    width: inherit;
    height: 2.5em;
    background-color: sienna;
}

Copy after login

Let the colors of the popsicles roll:

.flavors::before {
    animation: moving 100s linear infinite;
}

@keyframes moving {
    to {
        background-position: 0 1000vh;
    }
}

Copy after login

Finally, add the interactive effect, and the animation will only play when the mouse is hovering:

.flavors::before {
    animation-play-state: paused;
}

.ice-lolly:hover .flavors::before {
    animation-play-state: running;
}

Copy after login

You're done!

Related recommendations:

How to use pure CSS to achieve the animation effect of a three-dimensional button with metallic luster (source code attached)

How to Use pure CSS to achieve the animation effect of text disconnection (source code attached)

How to use CSS to achieve the effect of gradient animated borders (code attached)

The above is the detailed content of How to use pure CSS to achieve the animation effect of popsicles (with code). For more information, please follow other related articles on the PHP Chinese website!