一个图片无限循环上下运动实例

.btn-page{width: 25px;height: 25px;background: url(../images/footer3.jpg) no-repeat center;margin: 0 auto;
-moz-animation: btnPage 1.2s ease-in-out infinite;
-webkit-animation: btnPage 5s linear infinite;
animation: btnPage 2s ease-in-out infinite; }
@-moz-keyframes btnPage { 0% { -moz-transform: translateY(116px); }
50% { -moz-transform: translateY(0); }
100% { -moz-transform: translateY(116px); } }
@-webkit-keyframes btnPage { 0% { -webkit-transform: translateY(116px); }
50% { -webkit-transform: translateY(0); }
100% { -webkit-transform: translateY(116px); } }
@keyframes btnPage { 0% { transform: translateY(116px); }
50% { transform: translateY(0); }
100% { transform: translateY(116px); } }

 

 

<a href="http://www.baidu.com"><div class="btn-page"></div></a>

转载于:https://www.cnblogs.com/lsc-boke/p/6513004.html