Ressentez le plaisir de l'été en faisant vous-même une glace

Je participe au "Concours créatif du début de l'été" pour plus de détails, veuillez consulter : Concours créatif du début de l'été

L'été est très chaud, et il y a des aliments frais et délicieux comme la pastèque et la glace. Aujourd'hui, nous allons travailler ensemble pour réaliser une poignée de glace. Avant cela, regardons l'effet final :

Processus de mise en œuvre

Le processus de réalisation de la crème glacée est le suivant :

1. Définissez dom, le conteneur contient 2 éléments, ice-lollyutilisés pour dessiner toute la zone de la crème glacée, la flavorscrème glacée, stickest la zone de la crème glacée.

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

2. Centrez ensuite le corps pour un affichage facile

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

3. Dessinez la forme de la glace: .flavors, la taille et la largeur peuvent être ajustées, et la glace peut border-radiusêtre réglant pour rendre la glace plus ronde.

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

4. Colorez les sucettes glacées : .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. Ajouter des effets d'éclairage :.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. Dessinez des baguettes de popsicle :.stick

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

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

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

8. Les sucettes glacées roulent en couleur .flavors::before, plus vives

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

9. Souris flottante et arrêtez l'animation .ice-lolly:hover, laissez la glace avoir un effet d'animation simple

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

Enfin, après avoir terminé l'élaboration de l'ensemble de la glace, avez-vous ressenti la fraîcheur dans la chaleur estivale ?

voir l'effet

Nous pouvons l'afficher via la 马上掘金fonction , il prend non seulement en charge l'écriture de css + html, mais prend également en charge l'opération d'essai, ce qui est très pratique. L'effet est le suivant :

Références

• github.com/comehope/fr…