Effetto luce pulsante

Dalla teoria alla pratica In questo periodo sto cercando di dare più spazio all’aspetto pratico del blog attraverso esempi concreti, […]
Effetto luce pulsante

Dalla teoria alla pratica

In questo periodo sto cercando di dare più spazio all’aspetto pratico del blog attraverso esempi concreti, la teoria è importantissima ma poi bisogna passare alla pratica no?! 🙂 In questo post ho cercato di realizzare una sorta di insegna luminosa con effetto luce a intermittenza.

Il Codice necessario

L’html è formato da un semplicissimo H1, ti segnalo quindi la parte più importante del css.

h1{
    animation-name:light;
    animation-duration:700ms;
    animation-timing-function:ease-out;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}

I valori riportati sopra indicano rispettivamente: nome dell’animazione + durata + funzione di temporizzazione + ripetizione + direzione. Il tutto è riferito alla seguente regola @keyframes, la parte pulsante dell’esempio 🙂

@keyframes light{
    0% {
        box-shadow:0 0 5px rgba(63,163,255,0.2), 0px 3px 5px rgba(0, 0, 0, 0.5);
    }
    100% {
        box-shadow:0 0 40px rgba(63,163,255,0.8), 0px 3px 5px rgba(0, 0, 0, 0.5);
    }
}

I primi due valori della regola @keyframe indicano la distanza orizzontale e verticale dell’ombreggiatura rispetto al riquadro. Il valore successivo indica il raggio di sfumatura. Infine vi è il colore.

Avrai notato che per ogni valore di percentuale ci sono due dichiarazioni di box shadow, l’ultima crea una seconda ombra con opacità diverse in base alla pulsazione della luce.

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github