Podoba mi się sposób, w jaki te pierścienie świecą i pulsują, i chciałbym wiedzieć, jak to zrobili.Jak utworzyć animację pulsującego pierścienia poświeconego w CSS?
Mogę zrobić coś podobnego, ale nie jestem zbyt dobry.
To wszystko, co udało mi się wymyślić, ale nie działa.
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>
Od patrząc na ich kodu źródłowego, wygląda na to, że stosowane 'keyframes',' border-radius: 50% ',', 'transform' opacity',' translate' i 'scale'. – 4castle
Googling 'css pulsating rings' zwraca stos codepens i rzeczy: http://jsfiddle.net/dirtyharry/dw51cgu6/ –
może być pomocny: http://stackoverflow.com/a/33160848/3597276 –