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

admin管理员组

文章数量:1794759

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合法，你想要实现多么奇葩的滑动动画效果都可以，例如滑动变色/翻转/大小等等。

本文标签： 静态效果动画图片css