簡(jiǎn)單的一個(gè)盒子移動(dòng)到另一個(gè)盒子，你用什么方式實(shí)現(xiàn)動(dòng)畫效果？

　　· 方法一：使用HTML+CSS里面的transition過渡動(dòng)畫結(jié)合2d的位移translate設(shè)置

<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動(dòng)畫屬性結(jié)合2d里面的位移translate進(jìn)行實(shí)現(xiàn)

<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>

　　· 方法三：復(fù)雜方法，可以使用js封裝一個(gè)動(dòng)畫函數(shù)，直接使用鼠標(biāo)移動(dòng)移入事件或者點(diǎn)擊事件觸發(fā)移動(dòng)

<script>

//獲取元素
   //設(shè)置x和y的值
   //綁定鼠標(biāo)移入事件==緩慢移動(dòng) x的位置進(jìn)行移動(dòng) 自減
   //綁定鼠標(biāo)移出事件==緩慢移動(dòng) x的位置進(jìn)行移動(dòng) 自增

</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>

　　更多關(guān)于“前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來試聽。