我记得做过一些css学习,我学会了做文字装饰:眨眼,文字开始闪烁。
现在我有了一个图标,
.iconPM{
background: url(../images/icons/mail_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
display:inline-block;
}
如果需要,可以通过简单的css或jquery来解决这个问题。或者也许在jquery推荐的任何其他好的效果
答案 0 :(得分:24)
像这样的简单jquery会这样做:
function blink(){
$('.iconPM').delay(100).fadeTo(100,0.5).delay(100).fadeTo(100,1, blink);
}
$(document).ready(function() {
blink();
});
答案 1 :(得分:5)
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>
&#13;
答案 2 :(得分:3)
这个怎么样?
CSS:
.iconPM.no-image{ background:none; }
JS:
var toggleClassFcn = function(){$(".iconPM").toggleClass("no-image");}
setInterval(toggleClassFcn, 300);
请注意页面上的任何其他动画。它将消耗页面上的线程。
答案 3 :(得分:1)
不,单独使用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();