開發(fā)人員用代碼完成令人驚嘆的事情的能力永遠不會令人驚嘆。當然，功能仍然扮演著重要的角色。但是這些天來，我們也看到一些超凡脫俗的視覺效果在 CSS 和 JavaScript 等的幫助下變得栩栩如生。
 
今天，我們將重點關(guān)注一個肯定會引起您注意的領(lǐng)域：背景圖案。請注意，這里沒有微妙之處。我們即將向您展示的代碼片段將音量調(diào)高至11。有些甚至包括遙遠的動畫來增強效果。
 
杰瑪·斯蒂爾斯 (Gemma Stiles ) 創(chuàng)作的 60 年代壁紙
 
這種復(fù)古風格的橙色和藍色混合是用高達八行的 SCSS 創(chuàng)建的。雖然它不是動畫的，但以正確的方式凝視它確實提供了運動的感覺。
 

 
摩爾紋，請由 Marjel
 
這里我們有另一個橙色和藍色的例子，這次是在混合中添加了運動。這是一種莫爾（干涉）圖案，觀看起來非常強烈。嘈雜的外觀讓人想起在廉價電視上玩的舊電子游戲。那些對這種視覺效果有不良反應(yīng)的人可能想要避免這種視覺效果。
 

 
Bailh的太陽王
 
這部迷幻動畫看起來像是在搖滾音樂會的大屏幕上出現(xiàn)的。JavaScript 驅(qū)動的效果非常吸引人且錯綜復(fù)雜。而且由于它的運動有些溫和，您甚至可能會想在自己的項目中使用它。
 

 
Brandon Brule的“G”代表發(fā)電機
 
SVG 是創(chuàng)建背景圖案和效果的絕佳工具，因為它們清晰且靈活。此代碼段提供了一種隨機或通過設(shè)置面板創(chuàng)建自己的模式的方法。
 

 
利亞姆·伊根（Liam Egan）的目標
 
很少有東西能引起用戶的注意，比如運動和顏色的結(jié)合。在這里，我們有一個非常有效地使用這種串聯(lián)的例子。當它們飛過時，迷人的、幽靈般的靶心會被色帶增強。結(jié)果是一種模式可以讓您保持興趣，而不是嚇跑您。
 

 
huibvg都是三角形
 
有些事情在簡單時會更好。這是一個示例，說明如何組合幾個形狀以創(chuàng)建看起來比實際復(fù)雜得多的東西。這組不同色調(diào)的 SVG 三角形（查看片段左上角的白色輪廓）散發(fā)出3D 氛圍，鼓勵用戶繼續(xù)盯著看。
 

 
Carpe Numidium 接合的聯(lián)鎖裝置
 
保持簡單的主題，看看這個純 CSS 模式。它本質(zhì)上是一組在屏幕上重復(fù)的互鎖形狀。而且，再一次，結(jié)果看起來不僅僅是其部分的總和。尤其是當您認為此代碼段少于 70 行代碼時。使用Photoshop重復(fù)此操作會更加耗時。
 

 
ichimonzi的三次樂趣
 
同一屏幕上有多個動畫圖案？“異端，”你說。實際上，它實際上非?？?。三列相等，每列都有不同的顏色和動畫風格。它們聲音很大，但似乎也很好地融合在一起。作為獎勵，將鼠標懸停在一列上，它就會展開。在某種程度上，它讓人想起電視節(jié)目，背景是一堵監(jiān)視器墻。
 

 
在大多數(shù)情況下，上面的片段對于日常使用來說并不實用（除非你喜歡整個野蠻的東西）。但這就是讓他們變得有趣的部分原因。哎呀，這就是使 CodePen 本身如此出色的原因。它用于實驗和創(chuàng)造你可能不會嘗試的東西。
 
有時，您從構(gòu)建彩色圖案之類的東西中獲得的知識可能會再次用于更通用的目的。只是經(jīng)驗本身可以是有益的。
 
因此，雖然這些模式可能會像拇指疼痛一樣突出，但它們確實起到了重要作用。也許他們適合網(wǎng)頁設(shè)計師對自我提升的追求。