HTML 5 ile parlaklık efekti nasıl oluşturulur

Question

Yeni Dokümantasyon sitesi Yığında görüldüğü gibi bu küçük mavi noktayı uygulamak için yardım arıyorsanız, hizmet sağlığını/metriklerini gösteren bir gösterge panosunu canlandırmak için mükemmeldir. Ben bile ;-D

https://jsfiddle.net/raffinyc/3trup2c1/

.help-bubble:after { 
    content: ""; 
    background-color: #3af; 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    position: absolute; 
    display: block; 
    top: 1px; 
    left: 1px; 
} 
<span class="help-bubble-outer-dot"> 
     <span class="help-bubble-inner-dot"></span> 
</span> 

parlıyor, çok daha az bir mavi olan bir nokta alınamıyor Ben Chrome'un denetçisini kullanarak html/css yakaladı ama bu eşyalara çok kötüyüm

Answer 1

Here's the full reproduction. Animasyon, yalancı ifadelerin liberal kullanımını sağlar. CSS: Kayıt için

.help-bubble .help-bubble-outer-dot { 
    margin: 1px; 
    display: block; 
    text-align: center; 
    opacity: 1; 
    background-color: rgba(0,149,255,0.4); 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    animation: help-bubble-pulse 1.5s linear infinite; 
} 

.help-bubble { 
    display: block; 
    position: absolute; 
    z-index: 2; 
    cursor: pointer; 
    left: 40px; 
    top: 40px; 
} 

.help-bubble::after { 
    content: ""; 
    background-color: #3af; 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    position: absolute; 
    display: block; 
    top: 1px; 
    left: 1px; 
} 

.help-bubble .help-bubble-inner-dot { 
    background-position: absolute; 
    display: block; 
    text-align: center; 
    opacity: 1; 
    background-color: rgba(0,149,255,0.4); 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    -webkit-animation: help-bubble-pulse 1.5s linear infinite; 
    -moz-animation: help-bubble-pulse 1.5s linear infinite; 
    -o-animation: help-bubble-pulse 1.5s linear infinite; 
    animation: help-bubble-pulse 1.5s linear infinite; 
} 

.help-bubble .help-bubble-inner-dot:after { 
    content: ""; 
    background-position: absolute; 
    display: block; 
    text-align: center; 
    opacity: 1; 
    background-color: rgba(0,149,255,0.4); 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    -webkit-animation: help-bubble-pulse 1.5s linear infinite; 
    -moz-animation: help-bubble-pulse 1.5s linear infinite; 
    -o-animation: help-bubble-pulse 1.5s linear infinite; 
    animation: help-bubble-pulse 1.5s linear infinite; 
} 

@keyframes help-bubble-pulse{ 
    0% { 
    transform: scale(1); 
    opacity: .75; 
    } 
    25% { 
    transform:scale(1); 
    opacity:.75; 
    } 
    100% { 
    transform:scale(2.5); 
    opacity:0 
    } 
} 

, ben çok iyi kod fikri mülkiyet usta değilim ama o hakları nedense kendi yapmadan aynen bu kullanmak zorunda düşüktür.

Answer 2

box-shadow deneyin:

-webkit-box-shadow: 0px 0px 20px 0px rgba(0,225,255,1); 
-moz-box-shadow: 0px 0px 20px 0px rgba(0,225,255,1); 
box-shadow: 0px 0px 20px 0px rgba(0,225,255,1); 

sözdizimi:

0px (horizontal offset) 0px (vertical offset) 20px (bur value) 0px (spread value) rgba (color value) 

fazla bilgi için buraya bakınız:

https://css-tricks.com/snippets/css/css-box-shadow/