Far lampeggiare un bordo tramite CSS

Ho dovuto far lampeggiare un bordo di un div html, così informandomi un po' ho trovato questa soluzione.

Div html che deve avere il bordo lampeggiante

<div class="bordolampeggiante">
    <a>contenuto del div</a>
</div>
CSS per far lampeggiare il bordo


@keyframes lampeggio {  

50% { border-color: #ff0000; } 
}
.bordolampeggiante{ 
    border-color: #000000;
    border: solid;
    animation: lampeggio ;
    animation-timing-function: step-end ;
    animation-iteration-count: infinite ;
    animation-direction: alternate ;

    animation-duration: .5s ;
  

CSS per far lampeggiare il bordo mentre cambia colore
@keyframes lampeggio {  

33% { border-color: #ff0000; } 
66% { border-color: #ca9856;   } 
}
.bordolampeggiante{ 
    border-color: #000000;
    border: solid;
    animation: lampeggio ;
    animation-timing-function: step-end ;
    animation-iteration-count: infinite ;
    animation-direction: alternate ;
    animation-duration: .5s ;
    

In questo css la differenza è che ci sono 2 percentuali e 2 colori diversi.

Descrizione della funzione di ogni riga.

@keyframes lampeggio {            Indica il nome della funzione

33% { border-color: #ff0000; }      al 33% fa diventare il colore del bordo #ff0000 (rosso)
66% { border-color: #ca9856; }    al 66% fa diventare il colore del bordo #ca9856 (marrone chiaro)
}             chiude la funzione


.bordolampeggiante{            indica che gli elementi con class="bordolampeggiante" seguono queste indicazioni del CSS
border-color: #000000;         Colore del bordo nero
border: solid;                       Bordo continuo
animation: lampeggio ;         Da il nome dell'animazione, indica che l'animazione lampegggio si applica a questo elemento.
animation-timing-function: step-end ;  Indica che l'animazione va a passi.
animation-iteration-count: infinite ;      Indica che l'animazione si ripete infinite volte
animation-direction: alternate ;           Indica che l'animazione va avanti ed indietro, in pratica nero rosso marrone rosso nero
animation-duration: .5s ;                    Indica il tempo per un ciclo dell'animazione




 




 

Commenti

Lascia un commento

Nome
Commenti
Captcha
7 più 3 uguale