css实现静态图片实现上下滑动动画效果

css实现静态图片实现上下滑动动画效果

• • css代码
  • html
  • 总结

css代码

可以滑动理解为一点路程，设置点1的位置，点2为运行到中间的位置，点3为最后停止的位置。css菜鸟教程中说这种动画是基于一段时间逐渐改变元素的css样式实现。
注意: @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器.

点1————点2——————点3

.more img{width:25px;
		 animation: myMove 2s infinite;
        -webkit-animation: myMove 2s infinite;
        //-webkit-animation一个复合属性，想了解的百度，用于实现动画
        position: relative;
        top: 0px;
}
@keyframes myMove {//myMove必须，是动画名称，可以理解为定义一个方法
        0% {
            top: 0px;//0%代表开头动画
        }

        50% {
            top: 18px;//css样式必须
        }

        100% {
            top: 0px;//100%代表动画完成
        }
    }

html

以一张简单的图片为例

<div class="more"><a href="javascript:;" ><img  src="/page/img/more.png" ></a></div>

总结

@keyframes规则，上面实例为一个基本的利用该规则实现的动画效果，其中的0%，50%，100%等等可随意设置0%到100%（比如0%，20%，50%，100%），并且每个百分比都必须设置对应样式
，也就是说只要css合法，你想要实现多么奇葩的滑动动画效果都可以，例如滑动变色/翻转/大小等等。