Comment utiliser du CSS pur pour obtenir des effets d'animation popsicle (avec code)

Le contenu de cet article explique comment utiliser du CSS pur pour réaliser l'effet d'animation des popsicles (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Aperçu de l'effet

Téléchargement du code source

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

Interprétation du code

Définissez dom, le conteneur contient 2 éléments :

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

Affichage centré :

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

Dessinez la forme de la popsicle :

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

Colorez les sucettes glacées :

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

Ajoutez des effets de lumière :

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

Dessinez les baguettes de glaces :

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

Ajoutez un peu d'ombre aux baguettes de popsicle pour augmenter l'effet tridimensionnel :

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

Laissez les couleurs des popsicles rouler :

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

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

Enfin, ajoutez un effet interactif qui jouer uniquement lorsque la souris survole Animation :

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

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

Terminé !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir l'effet d'animation de boutons tridimensionnels avec un éclat métallique (code source ci-joint)

Comment utiliser du CSS pur pour obtenir l'effet d'animation de déconnexion du texte (avec code source)

Comment utiliser CSS pour obtenir l'effet de bordures animées en dégradé (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!