像素風格是我們在網上看到的大部分內容。隨著更先進的顯示技術的出現，我們的屏幕上顯示的這些小方塊越多。結果是文本和圖像都非常清晰。

盡管如此，對于所有這些高科技美女來說，經典像素風 帶來的簡潔性還有待提及。它不僅提醒我們過去的美好時光，也可以成為一種有效的設計技巧。

這將我們帶到今天的主題 - 使用像素作為背景。在正確的項目中，他們可以添加一些有趣的元素和驚人的創造力。我們來看一些顯示像素潛力的代碼片段。

這個多面的例子展示了各種各樣的外觀和動畫選項。使用預設菜單可從10多種不同的SVG背景中進行選擇。許多讓人想起復古的視頻游戲，有些確實比其他人更適合日常使用。無論如何，這個系列提供了可行的堅實底漆。

 

淡入黑色

漸變和像素似乎永遠不會很好地嚙合。但在野獸派設計時代，他們像馬里奧和路易吉一樣走在一起。這個片段演示了一個有趣，隨機的效果。它使用JavaScript將背景分成不同不透明度的小方塊。結果是一件生成的藝術品肯定會引起用戶的注意。

雅致的廣場

這是一個既不容錯過也很有品味的例子。大方塊以看似隨機的模式淡入淡出，但幸好不要壓倒。這可能會成為一個偉大的設計重點英雄區域，在那里給人留下第一印象是關鍵。

微妙的影響

如果您正在尋找不會分散您內容的動畫背景，那么這個簡單的代碼段值得一試。雖然風格與前面的例子類似，但它的不同之處在于動畫只運行一次。它足以吸引注意力而不會一次又一次地出現可能的運動煩惱。

變形面具

像素也可以在背景中扮演互補角色。例如，看看這個視頻。使用類似像素的圖案疊加層可以用來顯示簡單的徽標，符號或更隨機的東西。更好的是，這個特殊的例子是形狀轉換。單擊視頻上的任意位置以查看模式更改。

飛蚊癥

是什么讓這個片段脫穎而出是它的復古外觀和現代功能的結合。這些浮動像素由particle.js創建，讓人聯想到20世紀50年代/ 60年代的太空主題藝術。將鼠標懸停在某個區域上，其像素突出顯示為亮白色，而單擊會強制它們散射。

CSS格子

像素藝術是格子圖案的絕佳選擇。方塊之間的細微差別可以形成一些有吸引力的，盡管不是現實詳細的。在這里，我們有一個相當簡單，純粹的CSS模式，可以作為英雄，標題或整個頁面的背景。

讓它成為3D

讓我們來看看經典與現代相比的另一個很好的例子。借助CSS和jQuery，這個標志已經變成了一個交互式的3D杰作。懸停在廣場上會照亮它，而偏移的視角使頂部的物品看起來很遠。毫無疑問，這將成為令人信服的背景。

靈活的背景選擇

使用基于像素的背景的固有優勢是它們的多功能性。例如，您可以使用具有大量平滑動畫的背景。或者你可能更喜歡完全靜態的東西。然后可以選擇一個非常隨機的，引人注目的模式或更可預測的模式。

無論您的需求如何，都有一種技術可以完美契合。因此，如果您正在尋找能夠幫助您的網站脫穎而出的東西，請不要忽視像素的可能性。