Quiero que el ícono del navegador se resalte cuando lleguen notificaciones o mensajes. Necesito implementarlo en mi proyecto angular. Entonces, ¿alguna sugerencia de cómo lograrlo?
en css
@-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } .blink { width: 10px; height: 10px; border-radius: 10px; animation: blinker 2s linear infinite; background-color: red; margin-right: 5px; } .main-content { display: flex; flex-direction: row; align-items: center; }en html
<div class="main-content"> <i class="blink"></i> </div> @-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } .blink { width: 10px; height: 10px; border-radius: 10px; animation: blinker 2s linear infinite; background-color: red; margin-right: 5px; } .content { display: flex; flex-direction: row; align-items: center; } <div class="content"> <i class="blink"></i> </div> para parpadear, solo use el parpadeo @-webkit-keyframes y configure el retraso según su elección