Q: 是不是來點icon比較知道這是幹嘛的？
A: 不複雜的可以用css畫，複雜的可以考慮出圖或是svg！

繼上一篇已經做出一個置底的彈出式選單，但看著總覺得還少了點什麼，本篇會對上一篇的選單新增icon及其他，讓選單看起來更完整。

請先進上一篇，本篇將沿用上一篇的程式碼

CSS微動畫 - 彈出來的選單 Part.1
本篇將上一篇的背景顏色修改為灰色的，再來做以下的icon變化～

從大顆的icon開始

這裡寫出.btn的偽元素，透過transform的變形讓元素旋轉，然後在:hover時做位移並給.btn陰影樣式，這裡要記住偽元素也需要加transition才會有漸變效果。

<style>
  .btn {
    box-shadow: 0 0 0 0 transparent;
    transition: .3s;
  }
  .btn::before,
  .btn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 35px;
    transition: .2s
  }
  .btn::before {
    width: 25px;
    height: 25px;
    border-top: 10px solid DimGray;
    border-left: 10px solid DimGray;
    transform: translateX(-50%) rotate(45deg);
  }
  .btn::after {
    width: 10px;
    height: 50px;
    background-color: DimGray;
    transform: translateX(-50%);
  }
  .btn:hover {
    box-shadow: 0 0 8px 3px DimGray;
  }
  .btn:hover::before,
  .btn:hover::after {
    top: 30px
  }
</style>

箭頭變成叉叉

這裏將箭頭的樣式變成叉叉，然後為了讓轉換的過程看起來比較不生硬，把旋轉的角度都加大，這樣在漸變的時候就不會看到明顯變化的樣子。

<style>
  .is-active.container .btn::before,
  .is-active.container .btn::after {
    height: 55px;
    width: 10px;
    border: 0;
    background-color: DimGray;
  }
  .is-active.container .btn::before {
    transform: translateX(-50%) rotate(225deg);
  }
  .is-active.container .btn::after {
    transform: translateX(-50%) rotate(135deg);
  }
</style>

最後加點變化

<style>
  .is-active.container .btn:hover {
    background-color: PeachPuff;
    box-shadow: 0 0 8px 3px SandyBrown;
  }
  .is-active.container .btn:hover::before,
  .is-active.container .btn:hover::after {
    background-color: SandyBrown;
  }

  .item {
    box-shadow: 0 0 0 0 transparent;
  }
  .item:hover {
    background-color: PeachPuff;
    box-shadow: 0 0 4px 1px SandyBrown;
    transform: scale(1.1);
  }
</style>

互動感

前幾篇一直有提到畫面跟使用者的互動可以讓體驗更好，提升網頁質感，不同的動態效果也可以帶給網頁不同的感覺，本篇的選單彈出看起來比較活潑，如果今天希望選單看起來有不同的變化，淡出或是旋轉看起來都會不一樣～

謎音1：這一篇的示意影片還是卡卡的，再請各位見諒
謎音2：下一篇希望不會再有類似情形了！

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！