css实现div上下移动（css上下滑动）

CSS是前端必不可少的技术，它可以用来实现许多有趣的功能。例如，利用CSS可以让一个div在页面上上下移动，为网站增加一些动态感，使用户体验更加丰富。接下来，我们将介绍如何用CSS实现这一功能。

这是一个移动的div.moveDiv {
    position: absolute;
      /* 确保div的定位方式为绝对定位 */top: 0;
      /* 初试位置为页面顶端 */animation: moveUpDown 5s infinite;
  /* 定义动画，名称为moveUpDown，5秒执行一次，无限循环 */}
@keyframes moveUpDown {
0% {
    top: 0;
  /* 初始状态位于页面顶端 */}
50% {
    top: 200px;
  /* 50%时，在页面中间 */}
100% {
    top: 0;
  /* 100%时，回到页面顶端 */}
}
    

我们给需要移动的div添加一个类名.moveDiv，将其定位方式设为绝对定位，再通过animation属性定义动画。此处我们定义了名为moveUpDown的动画，它的执行时间为5秒，循环播放无数次。

接下来，我们在@keyframes定义动画的关键帧——0%、50%、100%，分别代表动画的开始、中间和结束状态。在0%时，移动的div在页面顶端；到了50%时，在页面中间；最后在100%回到页面顶端。

这样，我们就用CSS来实现了一个上下移动的div了。在实际应用中，只需根据需求更改动画名称、执行时间和关键帧即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！