¿Cómo crear un efecto radar con las animaciones en CSS?

25-02-2016 - Andrés Cruz

¿Cómo crear un efecto radar con las animaciones en CSS?

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

En esta entrada veremos cómo crear un simple efecto radar con solo CSS empleando múltiples etiquetas div obteniendo el siguiente resultado:

Para esto emplearemos las animaciones en CSS definiendo el siguiente keyframe:

@keyframes radar{
0%{
    width:75px;
    height:75px;
    border:40px 
    solid #fff;
    opacity:0
}50%{
    opacity:.1
}
90%{
    width:750px;
    height:750px
}
90%,100%{
    border:2px 
    solid #fff;
    opacity:0
}100%{
    width:1500px;
    height:1500px
}

Y un poco más de de CSS para definir su forma, color y tamaño inicial y posicionarnos en el espacio 2D con la propiedad transform:

.radar {
   position: absolute;
   top: 50%;
   left: 50%;
   border-radius: 50%;
   border: 10px solid #fff;
   width: 150px;
   height: 150px;
   -webkit-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
   -webkit-animation: radar 2s infinite;
   animation: radar 2s infinite;
   opacity: 0;
}

Ahora definiremos cada una de las ondas; en donde una onda representa un div:

<div class="radar"></div>
<div class="radar"></div>
<div class="radar"></div>
<div class="radar"></div>

Para evitar que las ondas se solapen entre si, alteramos el inicio de las animaciones para dos de ellas usando la propiedad CSS animation-delay:

.radar:nth-child(2) {
    animation-delay: .4s;
}
.radar:nth-child(3) {
    animation-delay: .9s;
}
.radar:nth-child(4) {
    animation-delay: .15s;
}

Y esto es lo principal que debes saber; además definiremos un fondo con un azul oscuro para poder ver el efecto quedando el experimento CSS de la siguiente manera:

Podemos adaptar el código inicial para colocar algún elemento como una imagen o un botón, obteniendo un interesante efecto que atrae la atención en un 100% al elemento central:


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!