在做專案時，設計稿上有個圓形，設計師希望呈現出不規則橢圓的動畫效果，我把它稱之為變形蟲效果😆
就像上圖所呈現的，動畫效果持續為不規則橢圓，並且會漸漸的變色
如何做到的呢？這其實不難～跟著我一起往下做吧！
1. 畫出基本圓形
首先先在畫布畫出一個圓形，並給了一個黃到綠的漸層顏色
1
| <div class="circle"></div>
|
1
2
3
4
5
6
| .circle {
height: 400px;
width: 400px;
border-radius: 100%;
background: linear-gradient(135deg, #ffe400 22%, #00ac97 72%);
}
|
2. 設定橢圓動畫效果
利用 @keyframes 設定橢圓效果，並在 animation 使用，alternate 會正反轉輪流播放
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| .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，使用逗號隔開就可以囉！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| .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.
🚀實體工作坊分享
最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！
🚀線上課程分享
線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。
Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住
如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！
Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
