首页 > 代码库 > css气泡图片上下浮动

css气泡图片上下浮动

1.css样式
<style>
  *{padding:0;margin:0;}
  .demo{
    width:160px;
    margin:0px auto;
    animation:Updown 1s infinite alternate;
    -webkit-animation:Updown 1s alternate infinite;/*infinite无限播放,alternate轮流反向播放*/
  }

  @keyframes Updown{
    from{margin-top:30px;}
    to{margin-top:10px;}
  }
  @-webkit-keyframes Updown{
    from{margin-top:30px;}
    to{margin-top:10px;}
  }

</style>

2.html内容
<body>

  <!-- 代码 开始 -->
  <div class="demo">
  <img src="http://www.mamicode.com/img.png"/>
  </div>
  <!-- 代码 结束 -->

</body>

css气泡图片上下浮动