Как создать анимацию пульсирующего свечения в CSS?
Мне нравится, как этоВеб-сайт заставили их кольца светиться и пульсировать и хотели бы знать, как они это сделали.
Я могу сделать что-то подобное, но я не очень хорош.
Так что это все, что я смог понять, но, похоже, это не сработало.
CSS:
glowycircleouter.blue .glow4 {
box-shadow: 0 0 25px #287ec6;
}
.glowycircleouter .glow4 {
-webkit-animation: glowyglow 3s 2250ms infinite;
-moz-animation: glowyglow 3s 2250ms infinite;
-ms-animation: glowyglow 3s 2250ms infinite;
-o-animation: glowyglow 3s 2250ms infinite;
animation: glowyglow 3s 2250ms infinite;
animation-name: glowyglow;
animation-duration: 3s;
animation-timing-function: initial;
animation-delay: 2250ms;
animation-iteration-count: infinite;
animation-direction: initial;
animation-fill-mode: initial;
animation-play-state: initial;
}
.glowycircleouter .glow4 {
opacity: 0;
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 200%;
height: 200%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
HTML:
<span class="glow4"></span>