0

Buen día, quisiera saber si es posible colocar resplandor intermitente al borde de una imagen o de un div al cargar la página (como una publicidad). Gracias.

1
  • Borde intermitente En esta parte puedo agregar. <img src="Logo.png"/>
    – Dalain
    el 18 feb. 2019 a las 0:37

2 respuestas 2

6

Lo que pides se puede hacer facilmente con CSS3, te dejo los links de la documentación para que la veas ahi lo explican muy bien. Necesitas crear un keyframes donde defines el comportamiento del objeto a lo largo del tiempo, el tiempo se lo asignas tu que es el tiempo que estara la animacion activa. Despues tan solo hay que aplicar la animacion al objeto o clase.

https://www.w3schools.com/css/css3_animations.asp https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

.intermitente{
  border: 1px solid black;
  padding: 20px 20px;
  box-shadow: 0px 0px 20px;
  animation: infinite resplandorAnimation 2s;
  
}
@keyframes resplandorAnimation {
  0%,100%{
    box-shadow: 0px 0px 20px;
  }
  50%{
  box-shadow: 0px 0px 0px;
  
  }

}
<html>
<head>
  
</head>

<body>
<div class="intermitente">Borde intermitente</div>
</body>

</html>

1
  • esta excelente tu respuesta, es posible se pueda cambiar el color del resplandor?
    – C47
    el 28 sep. 2018 a las 16:57
1

Puedes intentar algo como esto...

#resplandorverde{   
      -moz-box-shadow: 0px 0px 30px #A3FF0F; 
      -webkit-box-shadow: 0px 0px 30px #A3FF0F; 
      box-shadow: 0px 0px 30px #A3FF0F;
      
      padding: 10px;
      width: 160px;
      margin: 40px;
   }
.text {
  font-size:28px;
  font-family:helvetica;
  font-weight:bold;
  color:#71d90b;
  text-transform:uppercase;
}
.parpadea {
  
  animation-name: parpadeo;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
<span id="resplandorverde" class="parpadea">Coloca tu imagen aqui</strong>

1
  • 1
    si no quieres que el contenido parpadee sino solo el borde, puedes asignarle una posicion absoluta a la imagen y posicionarla sobre el borde, obviamente la imagen debe estar fuera del div/span/etc que contenga la clase "parpadea" el 13 jun. 2017 a las 21:27

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.