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
|
1
2
3
|
<div class="bordolampeggiante"> <a>contenuto del div</a></div> |
CSS per far lampeggiare il bordo
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@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.