Guardando Design + Code — Hour 5.2: Responsive Header su DevTips, ho trovato molto interessante l'effetto di transizione dell'icona menù, che diventa l'icona di chiusura del menù quando è aperto.

Il tutto fatto con quattro righe di CSS (nel caso specifico Sass) che vedete qui sotto.

  .nav-toggle
    width: 50px
    height: 50px
    display: flex
    align-items: center
    cursor: pointer

    span,
    span:before,
    span:after
        content: ""
        display: block
        width: 100%
        height: 8px
        background-color: #fff
        border-radius: 8px
        position: relative

        transition: all 0.3s ease
        box-shadow: 0 2px 0 rgba(0,0,0,.2)

    span:before
        top: 15px

    span:after
        bottom: -23px

    &:hover span
        background-color: transparent
        box-shadow: none

    &:hover span:before,
    &:hover span:after
        transform-origin: center
        transform: rotate(45deg)
        top: 0

    &:hover span:after
        transform: rotate(-45deg)
        top: -8px

--

Ho aggiunto solo qualche variabile per facilitare il lavoro, ed ecco il risultato.

--

--

Stupendo!

Grazie DevTips


735 0 0