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

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

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

 
Brandon Brule的“G”代表發(fā)電機(jī)
 
SVG 是創(chuàng)建背景圖案和效果的絕佳工具，因?yàn)樗鼈兦逦异`活。此代碼段提供了一種隨機(jī)或通過(guò)設(shè)置面板創(chuàng)建自己的模式的方法。
 

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

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

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

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

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