CSS3中怎么用一個div做彈跳小動畫

本篇內容主要講解“CSS3中怎么用一個div做彈跳小動畫”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS3中怎么用一個div做彈跳小動畫”吧!

利用偽元素

由于只使用了一個div，要同時達到正方形旋轉與陰影縮放的效果，這里必須使用兩個偽元素（before與after）來完成，嚴格來說，雖然只有一個div，但是卻是把這個div當作外框，讓偽元素before作為旋轉的正方形，讓偽元素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動畫

畫出正方形與陰影之后，再來就是要做動畫了，為了避免太過復雜，這里我們先不要旋轉，先單純讓正方形上下跳動，然后陰影會放大縮小，下面的示例的動畫，又新增了20%與80%的keyframe，目的是為了讓接觸的時候角落才會變圓，不然就會變成剛開始移動時尖角就變圓，就會很怪異了。

.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%的地方才開始變形*/
  }  50%{    top:80px; 
    border-bottom-right-radius:25px;
  }  80%{    border-radius:2px;  /*到80%的地方恢復原狀*/
  }  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;
  }}

加入旋轉效果

了解原理之后，我們只要再加上旋轉的屬性，就可以達到彈跳起來的時候有旋轉的效果，不過這里又有用到一個小技巧，就是落下的時候是90度轉到45度，彈上去的時候從45旋轉到0度，然后在這一瞬間從0度變成90度（100%到0%），如此一來我們就會產生錯覺，感覺好像一直在旋轉了。

@-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);
  }}專門建立的學習Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享學習方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

到此，相信大家對“CSS3中怎么用一個div做彈跳小動畫”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！