用几行简单的代码实现上下跳动的效果: 

html部分 (我就先放了一张图片)

<div class="xfsp"><img src="images/box1.png" /></div>
css部分:
.xfsp img{
opacity: .9;    
-webkit-animation: updown 1.2s infinite ease-in-out;
    animation: updown 1.2s infinite ease-in-out;
}
@keyframes updown{
    0%,100%{transform:translateY(0px);}
    25%{transform: translateY(-5px);}
    75%{transform: translateY(5px);}
}

就这几行 就简单的搞定啦~

然后说一下实现的原理吧:


这个效果用的是css3动画


我们可以用 @keyframes 规则来创建动画,你可以用百分比来规定变化发生的时间(如:0%,25%,50%,100%),或用关键词 "from" 和 "to",等同于 0% 和 100%。


设置完动画我们需要将动画绑定到我们要实现动画的元素上去。我这个例子中,就是绑定到  .good img上  用“animation: updown 1.2s infinite ease-in-out;” 第一个元素值代表的是动画的名称,第二个是动画的时长,第三个表示的是动画执行的次数 infinite 表示无限次循环。



值得一看的IT学习资讯类网站!http://hongsehuoxian.com
看到这里如果这篇文章真的帮到你了,不妨打赏一下哦!

以上就是红色火线JAVA加油站整理的关于用css3动画来实现物体上下跳动的效果的文章,
希望可以帮到你,如果你有不同的见解可以留言指正哦,避免让别的java小伙伴在走挫折路。
完美快速解决百度分享不支持HTTPS的问题
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信