CSS/jQuery：讓圖標閃爍

我記得做了一些CSS學習，我學會了做文本修飾：閃爍，文本開始閃爍。CSS/jQuery：讓圖標閃爍

現在我有一個圖標，

.iconPM{ 
background: url(../images/icons/mail_16x16.png) no-repeat; 
width: 16px; 
height: 16px; 
border: none; 
display:inline-block; 
}

想知道如果需要的話我可以讓這個功夫，無論是簡單的CSS或jQuery的。或者，也許jQuery中提供的任何其他好的效果建議

來源

2011-01-11 Karem

這不是一個問題，即是否可以，這是你是否應該的問題：P – BoltClock 2011-01-11 20:51:12

您可以使用一個jQuery插件閃爍：http://plugins.jquery.com/project/blink – DaiYoukai 2011-01-11 20:54:25

您可以使用``標籤。 :-P – 2011-01-11 20:58:47

像這樣的簡單的jQuery會做到這一點：

function blink(){ 
    $('.iconPM').delay(100).fadeTo(100,0.5).delay(100).fadeTo(100,1, blink); 
} 

$(document).ready(function() { 
    blink(); 
});

來源

2011-01-11 20:56:55 Hoatzin

不，不可能單獨CSS。

jQuery本身沒有預定義的動畫，但它自己提供methods to easily animate。

對於眨眼般：

function t1(){ 
    jQuery(".iconPM").animate({ 
    opacity: 0, 
    }, 1000); 
} 
function t2(){ 
    jQuery(".iconPM").animate({ 
    opacity: 0, 
    }, 1000); 
} 
runT1 = true; 
function rr() { 
    if (runT1) { 
    t1(); 
    } else { 
    t2(); 
    } 
    // toggle between 2 fns 
    runT1 = !runT1; 
    setTimeout("rr()", 500); 
} 
rr();

來源

2011-01-11 20:59:10 Kissaki

這個怎麼樣？

CSS：

.iconPM.no-image{ background:none; }

JS：

var toggleClassFcn = function(){$(".iconPM").toggleClass("no-image");} 
setInterval(toggleClassFcn, 300);

只是要小心，因爲與頁面上的任何其他動畫。它會消耗頁面上的線程。

來源

2011-01-11 21:06:22

現在CSS動畫是fairly well supported，所以我想我會分享一個CSS唯一的答案。

.iconPM { 
 
    background: url(https://raw.githubusercontent.com/stephenhutchings/typicons.font/493867748439a8e1ac3b92e275221f359577bd91/src/png-24px/mail.png) center no-repeat; 
 
    background-size: 16px 16px; 
 
    width: 16px; 
 
    height: 16px; 
 
    border: none; 
 
    display:inline-block; 
 
    
 
    animation: blink 2s ease-in infinite; 
 
} 
 

 
@keyframes blink { 
 
    from, to { opacity: 1 } 
 
    50% { opacity: 0 } 
 
}

<span class="iconPM"></span>

來源

2016-03-25 09:59:58 SeinopSys

CSS/jQuery：讓圖標閃爍

回答

相關問題