css实现一个上下浮动的动画效果

最新推荐文章于 2024-07-27 10:37:47 发布

dong-sir

最新推荐文章于 2024-07-27 10:37:47 发布

阅读量7.5k

点赞数 1

本文链接：https://blog.csdn.net/qq6759/article/details/105467948

版权

css3实现一个上下浮动的动画效果（animation）

CSS

@keyframes movepoint{from{top:50px}to{top:16px}}
.shade-button-point {
  display: inline-block;
  position: absolute;
  top: 50px;
  left: 30%;
  animation: movepoint 2s infinite;
  -webkit-animation: movepoint 2s infinite;
}

HTML

<div style="margin-right:10px;display:inline-block;position:relative">
  <button type="button">点我点我快点我</button>
  <img class="shade-button-point" src="https://img-blog.csdnimg.cn/2022010707303578649.png">
</div>