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

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

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

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

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

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

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

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

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