CSS彈跳動(dòng)畫(huà)效果的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2019-05-08 12:00:14 作者：果凍

這篇文章主要介紹了CSS彈跳動(dòng)畫(huà)效果的實(shí)現(xiàn)方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

這是只用了一個(gè)div來(lái)做的小動(dòng)畫(huà)，純粹利用CSS3的animation來(lái)完成，就像是一個(gè)正方形在地上彈跳，碰到地面的時(shí)候尖角還會(huì)壓縮變圓，陰影的部分也會(huì)隨著正方形升高而縮小，至于到底該怎么完成呢？讓我們繼續(xù)看下去。

利用偽元素

由于只使用了一個(gè)div，要同時(shí)達(dá)到正方形旋轉(zhuǎn)與陰影縮放的效果，這里必須使用兩個(gè)偽元素（before與after）來(lái)完成，嚴(yán)格來(lái)說(shuō)，雖然只有一個(gè)div，但是卻是把這個(gè)div當(dāng)作外框，讓偽元素before作為旋轉(zhuǎn)的正方形，讓偽元素after作為陰影。

.box{
  position:relative;

}
.box:before{
  content:'';
  position:absolute;
  z-index:2;
  top:60px;
  left:50px;
  width:50px;
  height:50px;
  background:#c00;
  border-radius:2px;
  transform: rotate(45deg);
}
.box:after{
  content:'';
  position:absolute;
  z-index:1;
  top:128px;
  left:52px;
  width:44px;
  height:3px;
  background:#eaeaea;
  border-radius:100%;
}

CSS動(dòng)畫(huà)

畫(huà)出正方形與陰影之后，再來(lái)就是要做動(dòng)畫(huà)了，為了避免太過(guò)復(fù)雜，這里我們先不要旋轉(zhuǎn)，先單純讓正方形上下跳動(dòng)，然后陰影會(huì)放大縮小，下面的示例的動(dòng)畫(huà)，又新增了20%與80%的keyframe，目的是為了讓接觸的時(shí)候角落才會(huì)變圓，不然就會(huì)變成剛開(kāi)始移動(dòng)時(shí)尖角就變圓，就會(huì)很怪異了。

.box:before{
  content:'';
  position:absolute;
  z-index:2;
  top:60px;
  left:50px;
  width:50px;
  height:50px;
  background:#c00;
  border-radius:2px;
  transform: rotate(45deg);
  -webkit-animation:box .8s infinite ; 
}
@-webkit-keyframes box{
  0%{
    top:50px;
  }
  20%{
    border-radius:2px;  /*從20%的地方才開(kāi)始變形*/
  }
  50%{
    top:80px; 
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;  /*到80%的地方恢復(fù)原狀*/
  }
  100%{
    top:50px;
  }
}
.box:after{
  content:'';
  position:absolute;
  z-index:1;
  top:128px;
  left:52px;
  width:44px;
  height:3px;
  background:#eaeaea;
  border-radius:100%;
  -webkit-animation:shadow .8s infinite ; 
}
@-webkit-keyframes shadow{
  0%,100%{
    left:54px;
    width:40px;
    background:#eaeaea;
  }
  50%{
    top:126px;
    left:50px;   /*讓陰影保持在原位*/
    width:50px;
    height:7px;
    background:#eee;
  }
}

加入旋轉(zhuǎn)效果

了解原理之后，我們只要再加上旋轉(zhuǎn)的屬性，就可以達(dá)到彈跳起來(lái)的時(shí)候有旋轉(zhuǎn)的效果，不過(guò)這里又有用到一個(gè)小技巧，就是落下的時(shí)候是90度轉(zhuǎn)到45度，彈上去的時(shí)候從45旋轉(zhuǎn)到0度，然后在這一瞬間從0度變成90度（100%到0%），如此一來(lái)我們就會(huì)產(chǎn)生錯(cuò)覺(jué)，感覺(jué)好像一直在旋轉(zhuǎn)了。

@-webkit-keyframes box{
  0%{
    top:50px;
    transform: rotate(90deg); /**/
  }
  20%{
    border-radius:2px;
  }
  50%{
    top:80px; 
    transform: rotate(45deg);
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;
  }
  100%{
    top:50px;
    transform: rotate(0deg);
  }
}

舉一反三，我們也可以把角度反轉(zhuǎn)，就會(huì)往另外一邊彈跳。

如果我們把動(dòng)畫(huà)里頭添加linear，就會(huì)變成線性的連續(xù)方式喔。

總結(jié)

以上所述是小編給大家介紹的CSS彈跳動(dòng)畫(huà)效果的實(shí)現(xiàn)方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！