iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
Modern Web

這個網站也太嗨!30 個網頁動態提案系列 第 7

#5-中秋月亮暈起來!不規則Blob球球(CSS)

這一兩年很常在網頁設計中看到這種不規則的小東西出現,甚至還會像波浪一樣動。
之前傻傻地用Svg做,然後一直換path,結果效能不太好。
上網一查發現其實只要用border-radius就做得到了。(請愛用英文搜尋Youtube!)

先看一下成品,當啦~
(好像動的有點慢...有機會再調一下哈)

在查資料的同時也發現圓圈圈的效果,就一起做了:

後面的殘影都是偽元素做的,opacity低一點就有恍惚的感覺啦~


Blob作法

相信大家都很神,這次就不放詳細的code了,主要就是靠border-radius做出blob蠕動的感覺~
不查還不知道有這個參數 ಥ⌣ಥ

bordr-radius /前面的是指四個邊角的x半徑,後面是y半徑,會畫出一個橢圓形~然後就是讓他一直變參數呀!

border-radius: 60% 87% 57% 68% / 50% 45% 78% 68%;

然後不同的圈圈動起來就設定秒數不一樣就好~

animation: blob-demo 15s linear infinite;

就是15s這個

@keyframes blob-demo{
	//看大家的教學影片才知道這樣把0&100一起寫就好了~
  0%, 100%{
    border-radius: 60% 87% 57% 68% / 50% 45% 78% 68%;
  }
  60%{
    border-radius: 46% 60% 77% 88% / 70% 65% 58% 88%;
  }
}

圈圈作法

圈圈呢,就是把旋轉中心設定大家都不一樣,就會有一層一層的感覺啦~


.圈圈的class{
	//...省略
	//rotation先0就定位
	//transform-origin稍微偏離原心一點就會轉偏離了~
	transform: rotate(0);
  transform-origin: 51% 51%;
	animation: rotation 2s linear infinite;
}

@keyframes rotation{
  to{
    transform: rotate(360deg)
  }
}

以上!

今天的code在這邊

中秋節快樂啦!
寫得很亂 ಥ⌣ಥ 回頭有時間再整理

參考:

圓圈圈作法:


上一篇
#4-圖片資訊藏起來!(Hover圖片&CSS Filter, Rotation)
下一篇
#6-無限文字Logo跑馬燈 (不用JS! CSS Animation)
系列文
這個網站也太嗨!30 個網頁動態提案33

1 則留言

0
毛毛
iT邦新手 3 級 ‧ 2021-09-21 14:03:24

我是使用 Fancy Border Radius Generator 來畫不規則圓形的~很直覺,也很方便

liawyudye iT邦新手 5 級 ‧ 2021-09-21 14:43:47 檢舉

好棒的工具!!謝謝分享

我要留言

立即登入留言