1. 畫出基本圓形

首先先在畫布畫出一個圓形，並給了一個黃到綠的漸層顏色

1	<div class="circle"></div>

.circle {
  height: 400px;
  width: 400px;
  border-radius: 100%;
  background: linear-gradient(135deg, #ffe400 22%, #00ac97 72%);
}

2. 設定橢圓動畫效果

利用 @keyframes 設定橢圓效果，並在 animation 使用，alternate 會正反轉輪流播放

.circle {
  height: 400px;
  width: 400px;
  background: linear-gradient(135deg, #ffe400 22%, #00ac97 72%);
  border-radius: 100%;
  animation: change-radius 10s ease-in-out infinite alternate;
}

@keyframes change-radius {
  0%, 100% {
    border-radius: 68% 55% 80% 50% / 68% 60% 70% 55%;
  }
  20% {
    border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
  }
  40% {
    border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%;
  }
  60% {
    border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%;
  }
  80% {
    border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%;
  }
}

3. 設定顏色漸變

利用 @keyframes 設定背景色的位置，background-size 調整到 1600%，數值可自行調整
如有兩個以上的 animation，使用逗號隔開就可以囉！

.circle {
  height: 400px;
  width: 400px;
  background: linear-gradient(135deg, #ffe400 22%, #00ac97 72%);
  border-radius: 100%;
  background-size: 1600% 1600%;
  animation: change-radius 10s ease-in-out infinite alternate,
  change-position 20s linear infinite alternate;
}

@keyframes change-radius {
  0%, 100% {
    border-radius: 68% 55% 80% 50% / 68% 60% 70% 55%;
  }
  20% {
    border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
  }
  40% {
    border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%;
  }
  60% {
    border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%;
  }
  80% {
    border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%;
  }
}

@keyframes change-position {
  100% {
    background-position: 100% 50%;
  }
}

完整範例

這麼一來就大功告成囉！做出來是不是很有趣呢 😊

See the Pen CSS變形蟲 by Lala (@bobee) on CodePen.

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。

Lala Code

用 CSS 打造酷炫的變形蟲效果-CSS教學