Css3制作简单的元素循环上下移动效果
  • 分享到微信朋友圈
    X

文章内容

分享一个Css3 animation制作的元素循环上下移动效果, 代码如下：

html代码

<style>
    .jqfree{ text-align:center; }
    .jqfree img
    { 
        animation: move 1.5s ease-in-out 0.1s alternate infinite;
        -webkit-animation: move 1.5s ease-in-out 0.1s alternate infinite;
        cursor: pointer;
    }
    @keyframes move{
    	from{ transform:translateY(0); -webkit-transform:translateY(0);}
    	to{ transform:translateY(-10px); -webkit-transform:translateY(-10px); }
    	}
    @-webkit-keyframes move{
    	from{ transform:translateY(0); -webkit-transform:translateY(0); }
    	to{ transform:translateY(-10px); -webkit-transform:translateY(-10px); }
    	}
</style>
<div class="jqfree">
    <img src="images/mouse.png" />
</div>

mouse.png

mouse.png