百度个性化首页-重要公告效果

时间:14-07-02 栏目:html5/css3 作者:zongyan86 评论:0 点击: 3,166 次

闲得蛋疼,天天在玩世界杯,突然发现重要公告多了个动画效果,想了下估计css3实现,果然不出我所料,百度也与时俱进了。

顺将效果扒下,没啥难度。 主要用到css3的动画效果 只是这一大坨大部分重复的代码,让人恶心巴拉的啊。怪不得css文件得压缩下了。

效果:

baidu

html:

<div class="sjb-impnotice">
<a class="impnotice-tips cssAnimDy" href="#" data-log="impnotice,重要公告" target="_blank"></a>
</div>

css3:

.sjb-impnotice a{background:url(a.png) no-repeat;_background:url(b.png) no-repeat;width:39px;height:140px;display:block}
.sjb-impnotice .cssAnimDy{background:url(c.png) no-repeat;animation:impTips 3s linear infinite;-moz-animation:impTips 3s linear infinite;-webkit-animation:impTips 3s linear infinite;-o-animation:impTips 3s linear infinite;-ms-animation:impTips 3s linear infinite}

@keyframes impTips{9.99%{background-position:0 0}10%{background-position:-39px 0}14.99%{background-position:-39px 0}15%{background-position:-79px 0}19.99%{background-position:-79px 0}20%{background-position:-119px 0}24.99%{background-position:-119px 0}25%{background-position:-159px 0}29.99%{background-position:-159px 0}30%{background-position:-199px 0}31.99%{background-position:-199px 0}32%{background-position:-239px 0}32.99%{background-position:-239px 0}33%{background-position:-279px 0}33.99%{background-position:-279px 0}34%{background-position:-319px 0}34.99%{background-position:-319px 0}35%{background-position:-359px 0}35.99%{background-position:-359px 0}36%{background-position:-399px 0}36.99%{background-position:-399px 0}37%{background-position:-439px 0}37.99%{background-position:-439px 0}38%{background-position:-479px 0}99.99%{background-position:-479px 0}100%{background-position:-39px 0}}
@-moz-keyframes impTips{9.99%{background-position:0 0}10%{background-position:-39px 0}14.99%{background-position:-39px 0}15%{background-position:-79px 0}19.99%{background-position:-79px 0}20%{background-position:-119px 0}24.99%{background-position:-119px 0}25%{background-position:-159px 0}29.99%{background-position:-159px 0}30%{background-position:-199px 0}31.99%{background-position:-199px 0}32%{background-position:-239px 0}32.99%{background-position:-239px 0}33%{background-position:-279px 0}33.99%{background-position:-279px 0}34%{background-position:-319px 0}34.99%{background-position:-319px 0}35%{background-position:-359px 0}35.99%{background-position:-359px 0}36%{background-position:-399px 0}36.99%{background-position:-399px 0}37%{background-position:-439px 0}37.99%{background-position:-439px 0}38%{background-position:-479px 0}99.99%{background-position:-479px 0}100%{background-position:-39px 0}}
@-webkit-keyframes impTips{9.99%{background-position:0 0}10%{background-position:-39px 0}14.99%{background-position:-39px 0}15%{background-position:-79px 0}19.99%{background-position:-79px 0}20%{background-position:-119px 0}24.99%{background-position:-119px 0}25%{background-position:-159px 0}29.99%{background-position:-159px 0}30%{background-position:-199px 0}31.99%{background-position:-199px 0}32%{background-position:-239px 0}32.99%{background-position:-239px 0}33%{background-position:-279px 0}33.99%{background-position:-279px 0}34%{background-position:-319px 0}34.99%{background-position:-319px 0}35%{background-position:-359px 0}35.99%{background-position:-359px 0}36%{background-position:-399px 0}36.99%{background-position:-399px 0}37%{background-position:-439px 0}37.99%{background-position:-439px 0}38%{background-position:-479px 0}99.99%{background-position:-479px 0}100%{background-position:-39px 0}}
@-o-keyframes impTips{9.99%{background-position:0 0}10%{background-position:-39px 0}14.99%{background-position:-39px 0}15%{background-position:-79px 0}19.99%{background-position:-79px 0}20%{background-position:-119px 0}24.99%{background-position:-119px 0}25%{background-position:-159px 0}29.99%{background-position:-159px 0}30%{background-position:-199px 0}31.99%{background-position:-199px 0}32%{background-position:-239px 0}32.99%{background-position:-239px 0}33%{background-position:-279px 0}33.99%{background-position:-279px 0}34%{background-position:-319px 0}34.99%{background-position:-319px 0}35%{background-position:-359px 0}35.99%{background-position:-359px 0}36%{background-position:-399px 0}36.99%{background-position:-399px 0}37%{background-position:-439px 0}37.99%{background-position:-439px 0}38%{background-position:-479px 0}99.99%{background-position:-479px 0}100%{background-position:-39px 0}}
@-ms-keyframes impTips{9.99%{background-position:0 0}10%{background-position:-39px 0}14.99%{background-position:-39px 0}15%{background-position:-79px 0}19.99%{background-position:-79px 0}20%{background-position:-119px 0}24.99%{background-position:-119px 0}25%{background-position:-159px 0}29.99%{background-position:-159px 0}30%{background-position:-199px 0}31.99%{background-position:-199px 0}32%{background-position:-239px 0}32.99%{background-position:-239px 0}33%{background-position:-279px 0}33.99%{background-position:-279px 0}34%{background-position:-319px 0}34.99%{background-position:-319px 0}35%{background-position:-359px 0}35.99%{background-position:-359px 0}36%{background-position:-399px 0}36.99%{background-position:-399px 0}37%{background-position:-439px 0}37.99%{background-position:-439px 0}38%{background-position:-479px 0}99.99%{background-position:-479px 0}100%{background-position:-39px 0}}

资源文件:

web开发分享



声明: 本文由( zongyan86 )原创编译,转载请保留链接: 百度个性化首页-重要公告效果

关注我们