如何使用HTML 5創建發光效果

尋找幫助實現在Stacks新文檔站點上看到的小藍點，它非常適合用於顯示服務運行狀況/度量標準的儀表板動畫。我使用Google Chrome的檢查抓起HTML/CSS，但我很可怕的這個東西，我甚至不能得到一個點，更別說一個藍色的會發出;-D如何使用HTML 5創建發光效果

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>

來源

2016-07-23 raffian

你可以看看這個：https：//codepen.io/nickpettit/pen/vacDI – Meinkraft

這是完美的，正是我在找什麼，thx – raffian

在這裏的另一個例子http://jsfiddle.net/dH6LS/ 1667 /如果您需要更多幫助，我可以幫助您。 –

Here's the full reproduction。動畫使用僞元素。 CSS的：

.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 
    } 
}

爲了記錄在案，我不是很精通代碼的知識產權，但它不太可能你有權利不以某種方式讓你自己正是用這個。

來源

2016-07-23 02:09:28 Harangue

關於錢，非常好，併爲記錄，無意使用此代碼原樣;只是想看看它是如何實現的，代碼示例刪除了所有的噪音，使得我學習技術變得更加容易，這纔是我的目標。 – raffian

我該如何內聯跨度？！ https://jsfiddle.net/3trup2c1/7/ –

@ ZiedRebhi ' .help-bubble {display：inline-block; z-index：2;光標：指針; 位置：相對; }' – Harangue

嘗試box-shadow：

-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);

的語法是：

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

來源

2016-07-23 02:01:37 Toby

不是那裏，似乎只有影子，我正在尋找發光的效果，看到這個：http://stackoverflow.com/documentation – raffian

如何使用HTML 5創建發光效果

回答

相關問題