Siente la diversión del verano haciendo tú mismo un helado

Participo en el "Concurso creativo de principios de verano" para obtener más información, consulte: Concurso creativo de principios de verano

El verano es muy caluroso y hay alimentos frescos y deliciosos como la sandía y el helado. Hoy trabajaremos juntos para realizar un mango de helado. Antes de eso, echemos un vistazo al efecto final:

Proceso de implementación

El proceso de realización del helado es el siguiente:

1. Defina dom, el contenedor contiene 2 elementos, se ice-lollyusa para dibujar toda el área flavorsde helados, helado, stickes el área de helados.

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

2. Luego centre el cuerpo para una fácil visualización.

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

3. Dibuje la forma de la paleta: .flavors, el tamaño y el ancho se pueden ajustar, y la paleta se border-radiuspuede configurando para que el helado sea más redondo.

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

4. Colorea las paletas: .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. Añadir efectos de iluminación:.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. Dibuja palillos de paletas:.stick

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

7. Agregue un poco de sombra a los palillos de paleta para aumentar el efecto tridimensional:.stick::after

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

8. Las paletas ruedan en color .flavors::before, más vívidas.

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

9. Ratón flota y detiene la animación .ice-lolly:hover, deja que el helado tenga un efecto de animación simple

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

Finalmente, después de completar la elaboración de todo el helado, ¿has sentido el frescor en el calor del verano?

ver el efecto

Podemos mostrarlo a través de la 马上掘金función , no solo admite la escritura de css + html, sino que también admite la operación de prueba, lo cual es muy conveniente. El efecto es el siguiente:

Referencias

• github.com/comehope/fr…