सीएसएस में एक पल्सिंग चमक रिंग एनीमेशन कैसे बनाएं?

Question

मुझे यह पसंद है कि इस website ने अपने छल्ले को चमक और नाड़ी से बाहर कर दिया और यह जानना चाहें कि उन्होंने यह कैसे किया।

मैं कुछ समान बना सकता हूं लेकिन मैं बहुत अच्छा नहीं हूं।

तो यह सब मैं समझने में सक्षम था लेकिन यह काम नहीं कर रहा है।

सीएसएस:

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> 

Answer 1

धागे टिप्पणी में लिंक किए गए सहायक होते हैं लेकिन मुझे नहीं लगता यह कोई सटीक डुप्लिकेट है क्योंकि यह एक थोड़ा और अधिक जटिल है कई अंगूठियों की आवश्यकता के कारण।

हम तत्वों के transform: scale() और opacity को एनिमेट करके इस प्रभाव को बना सकते हैं। यहां, हमें 1 से अधिक तत्वों की आवश्यकता है क्योंकि लिंक्ड वेबसाइट में हम कम से कम 3 अंगूठियां किसी भी समय पर देख सकते हैं (एक जो लुप्त हो रहा है, जो कि अपने चरम पर है, जो फ्डिंग आउट है)। एक ही एनीमेशन को दो छद्म तत्वों में जोड़कर, एक आंतरिक तत्व (span) और उनमें से दो पर एनीमेशन देरी करके हम आवश्यक एनीमेशन प्रभाव प्राप्त कर सकते हैं।

div { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 50%; 
 
    margin: 50px; 
 
    border: 2px solid white; 
 
} 
 
div:before, 
 
div:after, span { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0%; 
 
    left: 0%; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 15px #287ec6; 
 
    animation: glow-grow 2s ease-out infinite; 
 
} 
 
div:after { 
 
    animation-delay: .66s; 
 
} 
 
span{ 
 
    animation-delay: 1.33s; 
 
    } 
 
@keyframes glow-grow { 
 
    0% { 
 
    opacity: 0; 
 
    transform: scale(1); 
 
    } 
 
    80% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: scale(2); 
 
    opacity: 0; 
 
    } 
 
} 
 
body { 
 
    background: black; 
 
}

<div> 
 
    <span></span> 
 
</div>