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

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

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

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

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

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

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

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

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