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：让图标闪烁

回答

相关问题