css和js两种方式实现div右移1000px动画

最新推荐文章于 2025-04-29 10:20:21 发布

兜里揣着星星

最新推荐文章于 2025-04-29 10:20:21 发布

阅读量875

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css javascript css3

本文链接：https://blog.youkuaiyun.com/MCCLS/article/details/128915535

前端专栏收录该内容

19 篇文章

订阅专栏

本文展示了使用CSS3的@keyframes创建动画使div右移1000px，以及使用JavaScript原生方法监听点击事件，通过改变div的left属性模拟动画效果。CSS方法利用了动画帧来平滑移动，而JS方法则依赖于定时器和offsetLeft属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css和js两种方式实现div右移1000px动画

css方法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  #box {
    width: 100px;
    height: 100px;
    background-color: brown;
    position: relative;
    animation: mytest 3s linear 1s;
    -webkit-animation: mytest 3s linear 1s;
  }

  @keyframes mytest {
    1% {
      left: 0px;
    }

    20% {
      left: 200px;
    }

    50% {
      left: 500px;
    }

    70% {
      left: 700px;
    }

    100% {
      left: 1000px;
    }
  }

  @-webkit-keyframes mytest {
    1% {
      left: 0px;
    }

    20% {
      left: 200px;
    }

    50% {
      left: 500px;
    }

    70% {
      left: 700px;
    }

    100% {
      left: 1000px;
    }
  }
</style>

<body>
  <div id="box"></div>
</body>

</html>

js原生方法：

<! DOCTYPE html>
  <html lang="en">

  <head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
  </style>

  <body>

    <div id="box"></div>

  </body>

  </html>
  <script>
    var oBox = document.getElementById("box")
    oBox.onclick = function() {
      moveDiv(1000)
    }

    function moveDiv(data) {
      clearInterval(mytimer)
      var mytimer = setInterval(function() {
        let speed = 10;
        if (oBox.offsetLeft != data) {
          oBox.style.left = oBox.offsetLeft + speed + 'px'
        } else {
          clearInterval(mytimer)
        }
      }, 50)
    }
  </script>