简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果

方法一：使用HTML+CSS里面的transition过渡动画结合2d的位移translate设置

<div class="box1"></div>
<div class="box2"></div>
<style>
  *{
    
    margin:0;padding:0}
   div{
    
    
       float: left;
  }
   .box1{
    
    
       width: 200px;
       height:200px;
       background-color: red;
  }
   .box2{
    
    
       width: 100px;
       height:100px;
       background-color: green;
       transition: all linear 1s;
  }
   .box1:hover+.box2{
    
    
       transform: translateX(-100px);
  }
</style>

方法二：使用HTML5+CSS3中的animation动画属性结合2d里面的位移translate进行实现

<div class="box1"></div>
<div class="box2"></div>
<style>
    *{
    
    margin:0;padding:0}
    div{
    
    
        float: left;
    }
    .box1{
    
    
        width: 200px;
        height:200px;
        background-color: red;
    }
    .box2{
    
    
        width: 100px;
        height:100px;
        background-color: green;
        animation: mover linear 1s;
    }
    @keyframes mover{
    
    
        0%{
    
    
            transform: translateX(0px);
        }
        100%{
    
    
            transform: translateX(-100px);
        }
    }
</style>

方法三：复杂方法，可以使用js封装一个动画函数，直接使用鼠标移动移入事件或者点击事件触发移动

<script>
//获取元素
   //设置x和y的值
   //绑定鼠标移入事件==缓慢移动 x的位置进行移动 自减
   //绑定鼠标移出事件==缓慢移动 x的位置进行移动 自增
</script>
<style>
  *{
    
    margin:0;padding:0}
   div{
    
    float:left}
   .box1{
    
    width:300px;height:300px;background-color:red}
   .box2{
    
    width:100px;height:100px;background-color:green}
</style>
<div class="box1"></div>
<div class="box2"></div>

*陆荣涛前端学习交流Q群858752519
加群备注：CSDN推荐