So erzielen Sie mit reinem CSS den Animationseffekt von Eis am Stiel (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Animationseffekt von Eis am Stiel zu realisieren. Ich hoffe, dass er für Sie hilfreich ist.

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, der Container enthält 2 Elemente:

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

Zentrierte Anzeige:

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

Zeichnen Sie die Form des Eis am Stiel:

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

Färben Sie die Eis am Stiel:

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

Fügen Sie einige Lichteffekte hinzu:

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

Zeichnen Sie die Eis am Stiel:

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

Fügen Sie einen kleinen Schatten zu den Eis am Stiel hinzu, um die Drei zu erhöhen -Dimensionalität:

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

Lass die Farben des Eis am Stiel rollen:

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

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

Zum Schluss füge den interaktiven Effekt hinzu und spiele die Animation ab, wenn die Maus darüber schwebt:

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

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

Du' wieder fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den Animationseffekt dreidimensionaler Schaltflächen mit metallischem Glanz zu erzielen (Quellcode beigefügt)

So verwenden Sie reines CSS, um den Animationseffekt der Texttrennung zu erzielen (mit Quellcode)

So verwenden Sie CSS, um den Effekt von animierten Rahmen mit Farbverlauf zu erzielen (mit Code)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS den Animationseffekt von Eis am Stiel (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!