使用 CSS 和 JavaScript 構建的超棒的動畫背景

語言: CN / TW / HK

在網頁設計中,動畫經常被用來吸引注意力,移動會迫使使用者將注意力集中在特定的元素上,比如按鈕或影象。

但是動畫也可以以更微妙的方式使用。例如,動畫背景通常會忽略網站內容中的花裡胡哨,相反的,它們被用來創造情緒和增強美學。

這並不是說動畫背景不能很吵,甚至不能令人討厭。這完全取決於元素展示背後的目的。如果真要說有什麼不同的話,那就是這展示了設計師所擁有的靈活性。

下面收集了CodePen 上一些超棒的動畫背景,一起用起來吧!

散景動畫

散景風格常常與攝影聯絡在一起。在這裡,它被用來作為點進出焦點很大的效果-類似於熔岩燈。這個程式碼片段利用普通的 JavaScript 和 HTML 畫布來建立一個光滑的背景。

程式碼片段

磨砂動畫

這個背景是一個完美匹配了“磨砂”效果的使用者介面,可以看到球體輕輕地漂浮在下面的玻璃樣容器中,動畫也是隨機生成。

程式碼片段

CSS波浪動畫

下面是一個簡單的使用動畫背景的方法。CSS wave 提供了一種將主區域與頁面內容的其餘部分分離開來的方法,將一個很好的介紹部分呈現給使用者。

程式碼片段

CSS 漸變動畫

漸變顯而易見地是一個很酷的動畫背景,這裡有一個徑向漸變,可以微妙地改變色調。

程式碼片段

CSS無縫動畫文字

使用 CSS 背景剪輯可以給設計元素增加一些突出的影響。這個程式碼片段為標題文字添加了一個無縫的滾動背景,可以立即建立一個節日的氣氛。

程式碼片段

純 CSS 動畫

速度在動畫背景的使用者友好性中起著至關重要的作用。這些緩慢滾動的正方形可能會扭曲和轉動,但這樣允許更容易地閱讀的標題。如果你想在動畫上面新增文字,慢動作會更好。

程式碼片段

SVG 動畫

最後,這個程式碼片段巧妙地利用了我們在上面看到的效果的組合。有變化的梯度色調以及輕微變化的形狀。SVG 和 CSS 確保一切順利執行,重要的是,它在一個小的視窗上和在桌面上一樣漂亮。

程式碼片段