2015-09-07 130 views
0

我想從這張圖片中獲得此效果Glowing gifenter image description here如果需要,請使用CSS和JavaScript。我嘗試了亮度和對比度,但我無法得到結果。發光效果對PNG的脈動發光效果

+0

你爲什麼不張貼一些代碼。我的意思是你應該給出什麼時候亮度/對比度變化何時進行從一種狀態到另一種狀態的轉換.. –

+0

將css樣式從一個變爲另一個不是問題,用這樣的CSS獲得效果是一個問題。 –

+0

用發光編輯圖像。使用動畫在狀態之間切換。 –

回答

2

CSS過濾器將做到這一點。

支持但也不是很大:CanIUse.com

img { 
 
    -webkit-animation: glow .25s alternate infinite; 
 
    animation: glow .25s alternate infinite; 
 
} 
 
@-webkit-keyframes glow { 
 
    0% { 
 
    -webkit-filter: brightness(1); 
 
    filter: brightness(1); 
 
    } 
 
    100% { 
 
    -webkit-filter: brightness(2); 
 
    filter: brightness(2); 
 
    } 
 
} 
 
@keyframes glow { 
 
    0% { 
 
    -webkit-filter: brightness(1); 
 
    filter: brightness(1); 
 
    } 
 
    100% { 
 
    -webkit-filter: brightness(2); 
 
    filter: brightness(2); 
 
    } 
 
}
<img src="http://i.stack.imgur.com/ZUqANt.png" alt="" />