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

　　· 方法一：使用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>

　　更多关于“前端培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。