有趣的CSS彈跳動畫

alaege 發布于2019-08-02 16:16 / 2345人閱讀

摘要：舉一反三，我們也可以把角度反轉，就會往另外一邊彈跳。如果我們把動畫里頭添加，就會變成線性的連續方式喔。

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

利用偽元素

由于只使用了一個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);
  }
}

舉一反三，我們也可以把角度反轉，就會往另外一邊彈跳。

如果我們把動畫里頭添加linear，就會變成線性的連續方式喔。

GPU云服務器云服務器 css3動畫高性能css3動畫有趣的事有趣的python

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54984.html

有趣的CSS彈跳動畫

摘要：舉一反三，我們也可以把角度反轉，就會往另外一邊彈跳。如果我們把動畫里頭添加，就會變成線性的連續方式喔。這是只用了一個div來做的小動畫，純粹利用CSS3的animation來完成，就像是一個正方形在地上彈跳，碰到地面的時候尖角還會壓縮變圓，陰影的部分也會隨著正方形升高而縮小，至于到底該怎么完成呢？讓我們繼續看下去。利用偽元素由于只使用了一個div，要同時達到正方形旋轉與陰影縮放的...

edgardeng 2019-08-29 18:46 評論0 收藏0
【Hello CSS】第九章-如何畫一個體驗更好的動畫？

摘要：那就是重力加速度的表現以及彈力球與空氣，地面所產生的摩擦力的表現。彈力球下落時，由于重力加速度的原因，所以速度會越來越大，往上跳時速度會越來越小直至。作者：陳大魚頭 github： KRISACHAN 在上一節中，不走心地畫了一些 CSS圖案，本節就繼續不走心地畫動畫。 CSS的動畫屬性在CSS中，animation 、 transition 跟 transform...

BothEyes1993 2019-08-30 15:44 評論0 收藏0
推薦三兩款前端動畫庫，anitmate.css, velocity-animate， anime,

摘要：所以就說說吧優點可自定義動畫效果，支持隊列動效支持回調函數支持動畫的，等等功能缺點缺少自定義特效文檔比較少使用遇到的小問題默認不是勻速的，需要設置詳細整理待續在最近一段時間的工作里，常常用到動畫，我主要接觸了三個 animate.cssanimevelocity 下面分析一下他們的優缺點 animate.css 優點：animate.css主要是使用css實現動畫效果，目前已經有幾十...

xzavier 2019-08-20 16:10 評論0 收藏0
翻譯 | 深入理解CSS時序函數

摘要：一條正在繪制中的三次方貝塞爾曲線因為該曲線由四個點形成，我們將其稱為三次方貝塞爾曲線，而不是二次方曲線三個點或四次方曲線五個點。現在終于可以將貝塞爾曲線收入囊中了，也已經對這作者：Nicolas（滬江前端開發工程師）本文原創翻譯，轉載請注明作者及出處。各位，趕緊綁住自己并緊緊抓牢了，因為當你掌握了特別有趣但又復雜的CSS時序函數之后，你將會真正體驗到豎起頭發般的興奮感受。好吧，本...

Little_XM 2019-08-29 13:21 評論0 收藏0