Loading Demo

See the Pen 100DaysCss #04 by Cathy (@smile25896) on CodePen.

原本的題目是圓形，我自己換成了三角形並加了旋轉的效果。這個題目比較像之前的綜合練習，三個三角形各有一點時間差，最大的三角形最早變大但最晚變小，相反最小的三角形則是最晚變大最早變小。
另外一個細節就是，當三角形放得越大時，陰影就越擴散，形成三角形越大的時候，視覺上越靠近自己。另外因為我改成了三角形一般的box-shadow沒辦法使用，要改成用filter: drop-shadow()製作陰影。

學習重點

陰影：filter: drop-shadow()
動畫製作

陰影：filter: drop-shadow()

一般陰影常用box-shadow這個屬性，但box-shadow只能做出方形的陰影，並不會針對實際的形狀做出對應形狀的陰影。

像是這樣：

1	box-shadow: 2px 2px 6px rgba(0,0,0,0.7);

但filter: drop-shadow()只會針對非透明的部分做陰影，就可以做出三角形的陰影。

1	filter: drop-shadow(5px 5px 2px rgba(0,0,0,0.7));

動畫製作

這三個三角形依序變大之後，再返向縮小回去，因此我們只要建立好放大的動畫，再使用animation-direction: alternate;讓動畫在執行完一次後，反向再執行一次。（加速函式也會跟著反過來）

接著先來寫最大的三角形的關鍵影格：

@keyframes circle1-animate{
  0%{
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
    transform: scale(0) rotate(0deg);
  }

  100% {
    filter: drop-shadow(10px 10px 15px rgba(0,0,0,0.3));
    transform: scale(1) rotate(120deg);
  }
}

這樣就會有一個會不停邊放大邊旋轉之後又邊縮小邊旋轉的三角形動畫，另外想讓三角形縮小至不見之後，隔了一小段時間才再次出現，因此調整一下關鍵影格，讓三角形0%~30%的時間都維持在scale(0)的狀態。

@keyframes circle1-animate{
  0%, 30%{
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
    transform: scale(0) rotate(0deg);
  }

  100% {
    filter: drop-shadow(10px 10px 15px rgba(0,0,0,0.3));
    transform: scale(1) rotate(120deg);
  }
}

中型的三角形要在大三角形出現之後才出現，因此設定他的關鍵影格0%~50%的時間都維持在scale(0)的狀態，最小的則是0%~70%的時間都維持在scale(0)的狀態，其他皆與大三角形相同。

接著將關鍵影格套用至animation屬性中，透過之前學到的cubic-bezier設定加速函式，讓動畫在正向播放時呈現「快-慢」的效果，alternate倒轉時也會將加速函式倒過來變成「慢-快」。

1
2
3

.circle1{
  animation: circle1-animate 2s cubic-bezier(.21,.98,.6,.99) infinite alternate;
}