Good day, I would like to know if it is possible to place an intermittent glow on the edge of an image or a div when loading the page (like an advertisement). Thanks.
Good day, I would like to know if it is possible to place an intermittent glow on the edge of an image or a div when loading the page (like an advertisement). Thanks.
What you ask can be done easily with CSS3, I leave you the links of the documentation for you to see there explain it very well. You need to create a keyframes where you define the behavior of the object over time, the time you assign it to you which is the time that the active animation will be. Then you just have to apply the animation to the object or class.
.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>You can try something like this ...
#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>