Spüren Sie den Spaß des Sommers, indem Sie selbst ein Eis machen

Ich nehme am „Early Summer Creative Contest“ teil. Weitere Informationen finden Sie unter: Early Summer Creative Contest

Der Sommer ist sehr heiß und es gibt coole und leckere Speisen wie Wassermelone und Eiscreme. Heute werden wir gemeinsam daran arbeiten, einen Eiscremegriff zu realisieren. Schauen wir uns vorher den endgültigen Effekt an:

Umsetzungsprozess

Der Prozess der Herstellung von Eis ist wie folgt:

1. Definieren Sie Dom, der Behälter enthält 2 Elemente, ice-lollydie zum Zeichnen des gesamten Eisbereichs verwendet werden, flavorsEiscreme, stickist der Eisbereich.

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

2. Zentrieren Sie dann den Körper für eine einfache Anzeige

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

3. Zeichnen Sie die Form des Eis am Stiel: .flavorsGröße und Breite können angepasst werden, und das Eis am Stiel border-radiuskann Einstellen eingestellt werden, um das Eis runder zu machen.

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

4. Eis am Stiel färben: .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. Lichteffekte hinzufügen:.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. Zeichne Eis am Stiel-Stäbchen:.stick

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

7. Fügen Sie den Essstäbchen aus Eis ein wenig Schatten hinzu, um den dreidimensionalen Effekt zu verstärken:.stick::after

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

8. Die Eis am Stiel rollen in Farbe .flavors::before, lebendiger

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

9. Mausschweben und Animation stoppen .ice-lolly:hover, lassen Sie das Eis einen einfachen Animationseffekt haben

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

Endlich, nachdem Sie die Entwicklung des gesamten Eises abgeschlossen haben, haben Sie die Kühle in der Sommerhitze gespürt?

sehen Sie die Wirkung

Wir können es über die 马上掘金Funktion , es unterstützt nicht nur das Schreiben von css + html, sondern unterstützt auch den Testbetrieb, was sehr praktisch ist. Die Wirkung ist wie folgt:

Verweise

• github.com/comehope/fr…