css3动画 - 如何做一个向下不停滑动的双箭头？

查看：1834 发布时间：2017/9/6 7:57:02

本文介绍了css3动画 - 如何做一个向下不停滑动的双箭头？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题

如何做一个向下不停滑动的双箭头？

解决方案

用一个双箭头的图片，然后定义图片样式，在图片上加一个动画属性用infinite
html:

<div id="next" class="rightan">
    <img src="" alt="" data="images/right.png">
</div>

css:

@-webkit-keyframes rightan

{

from
{
    bottom: 0%;
    opacity: 0;
}
to
{
    bottom: 5%;
    opacity: 1;
}

}
.rightan
{

-webkit-animation: rightan 1s infinite;
-webkit-animation-fill-mode: both;

}

这篇关于css3动画 - 如何做一个向下不停滑动的双箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文