最近剛好在研究 CSS 動畫效果,有時網頁只是需要一個簡單動態效果,總不能花大錢製作影片吧?
後來發現可以利用簡單的 SVG 及一些 CSS 手法,就可以讓圖片動起來
只能說…高手真的是很強!看完介紹影片後,才覺得自己好弱呀~~
泡泡動態效果
Youtube影片介紹:https://youtu.be/liW6bDLnuuk
(這個作者真的蠻強的,除了泡泡影片也有其他跟 CSS、JavaScript 有關的動態效果影片,我已經入坑加入追蹤了)
它是利用 SVG 的動態語法特性,再加上 CSS 的配合,製作出會動的感覺
影片中提到的「泡泡 SVG」網站在這裡:https://lokesh-coder.github.io/blobs.app/?e=6&gw=6&se=32&c=d1d8e0&o=0 ,免費使用,真是佛心來的呀~~
依據影片教學我自己也製作出類似的動態效果
另外我自己又延伸出波浪的動態效果,不過在做完之後,才發現這個網站更佛心,它能自動產生動態效果,只要把語法放進 HTML 裡面就可以了,哈!
「波浪 SVG」:https://svgwave.in/
詳細的 SVG 動態語法,可以參考該站的說明:https://ithelp.ithome.com.tw/articles/10159283