Sinta a diversão do verão fazendo você mesmo um sorvete

Estou participando do "Early Summer Creative Contest" para obter detalhes, consulte: Early Summer Creative Contest

O verão é muito quente, e há comidas frescas e deliciosas como melancia e sorvete. Hoje vamos trabalhar juntos para realizar uma alça de sorvete. Antes disso, vamos dar uma olhada no efeito final:

Processo de implementação

O processo de fabricação do sorvete é o seguinte:

1. Defina dom, o container contém 2 elementos, ice-lollyusados ​​para desenhar toda a área flavorsdo sorvete, sorvete, stické a área do sorvete.

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

2. Em seguida, centralize o corpo para facilitar a exibição

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

3. Desenhe a forma do picolé: .flavors, o tamanho e a largura podem ser ajustados, e o picolé pode border-radiusser configurando para deixar o sorvete mais redondo.

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

4. Pinte os picolés: .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. Adicione efeitos de iluminação:.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. Desenhe pauzinhos de picolé:.stick

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

7. Adicione um pouco de sombra aos pauzinhos de picolé para aumentar o efeito tridimensional:.stick::after

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

8. Os picolés rolam em cores .flavors::before, mais vivas

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

9. Mouse flutuando e pare a animação .ice-lolly:hover, deixe o sorvete ter um efeito de animação simples

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

Finalmente, depois de concluir o desenvolvimento de todo o sorvete, você sentiu o frescor do calor do verão?

veja o efeito

Podemos exibi-lo através da 马上掘金função , ele não apenas suporta a escrita de css + html, mas também suporta a operação de teste, o que é muito conveniente. O efeito é o seguinte:

Referências

• github.com/comehope/fr…