css 实现上下、左右、左上、左下、右上、右下和对角线移动动画

简单的css 实现上下、左右、左上、左下、右上、右下对角线移动动画，内容简单容易上手，记得点赞关注+评论

天生欧皇张狗蛋

5842人浏览 · 2022-07-05 09:46:25

天生欧皇张狗蛋 · 2022-07-05 09:46:25 发布

一、原理

主要利用定位原理更改left right top bottom 来实现位移，在通过css transition过渡特性,当位移发生变化时会有一个过渡，把僵硬的动画更丝滑。
难度不高~照猫画虎系列，记得点赞关注

二、代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>上下、左右、左上、左下、右上、右下移动动画</title>
  <style type="text/css">
    #box{
      margin: 0 auto;
      width:800px; 
      height:500px;
      border: 1px solid;
      position: relative;
      display: flex;
      justify-content: center;
    }
    .btn{
      width: 100px;
      height: 40px;
      border-radius: 4px;
      text-align: center;
      line-height: 40px;
      background-color: bisque;
      font-size: 14px;
      cursor: pointer;
      margin-top: 40px;
    }
    .slider {
      width: 50px;
      height: 50px;
      border: 1px solid red;
      position: absolute;
      left: 375px;
      bottom: 275px;
      transition: left 2s, bottom 2s;
      /* 多个用逗号隔开 */
    }
  </style>
</head>
<body>
  <div id="box">
    <div class="btn" onClick="handle()">点击</div>
    <div class='slider'></div>
  </div>
</body>
<script>
  let btn = document.getElementsByClassName("btn")[0];
  let slider = document.getElementsByClassName("slider")[0];
  // 控制位移大小
  const handle = () => {
    if(slider.style.left == "375px" || !slider.style.left){
      slider.style.left = 0;
      slider.style.bottom = 0;
    }else{
      slider.style.left = "375px"
      slider.style.bottom = "275px"
    }
  }
</script>
</html>