Tutoriales gratuitos para el aprendizaje de la programacion informatica! Recuerda que si lo puedes imaginar... lo puedes programar!

Efecto Icono shadow css

HTML:
<a class="mapIcon" href="#"><i class="fas fa-map-marker-alt"></i></a>

CSS:
.mapIcon{
    animation:pulso 2s infinite;
    border-radius: 50%;
}

@keyframes pulso {

    0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 #4169E1;
            color:#4169E1;
    }

    70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
            color:#ccc;
    }

    100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            color:#4169E1;
    }

No hay comentarios:

Publicar un comentario