• 400-800-9385
    網站建設資訊詳細

    8 個用于創建狂野和瘋狂背景的 CSS 和 JavaScript 片段

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

    網站背景1

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

    網站背景2

     
    Bailh的太陽王
     
    這部迷幻動畫看起來像是在搖滾音樂會的大屏幕上出現的。JavaScript 驅動的效果非常吸引人且錯綜復雜。而且由于它的運動有些溫和,您甚至可能會想在自己的項目中使用它。
     
    網站背景3
     
    Brandon Brule的“G”代表發電機
     
    SVG 是創建背景圖案和效果的絕佳工具,因為它們清晰且靈活。此代碼段提供了一種隨機或通過設置面板創建自己的模式的方法。
     

    網站背景4

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

    網站背景5

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

    網站背景6

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

    網站背景7

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

    網站背景8

     
    在大多數情況下,上面的片段對于日常使用來說并不實用(除非你喜歡整個野蠻的東西)。但這就是讓他們變得有趣的部分原因。哎呀,這就是使 CodePen 本身如此出色的原因。它用于實驗和創造你可能不會嘗試的東西。
     
    有時,您從構建彩色圖案之類的東西中獲得的知識可能會再次用于更通用的目的。只是經驗本身可以是有益的。
     
    因此,雖然這些模式可能會像拇指疼痛一樣突出,但它們確實起到了重要作用。也許他們適合網頁設計師對自我提升的追求。
    如沒特殊注明,文章均為方維網絡原創,轉載請注明來自http://www.carcker.com/news/6593.html
    国产区女主播在线观看,国产学生粉嫩泬在线观看,国产女主播精品大秀系列_犇影視