二維碼
        企資網

        掃一掃關注

        當前位置: 首頁 » 企資快報 » 戶外 » 正文

        這18個網站能讓你的頁面背景炫酷起來

        放大字體  縮小字體 發布日期:2023-03-19 00:02:12    作者:葉東哲    瀏覽次數:118
        導讀

        1. CSS3 Patterns Gallery這18個網站是我在取經路上意外發現的,里面包括 純CSS 實現的炫酷背景,還有專門制作背景圖的網站。 算是取經路上的大補之物~? 傳送門:https://projects.verou.me/css3patterns/如果你認

        1. CSS3 Patterns Gallery

        這18個網站是我在取經路上意外發現的,里面包括 純CSS 實現的炫酷背景,還有專門制作背景圖的網站。 算是取經路上的大補之物~

        ? 傳送門:https://projects.verou.me/css3patterns/

        如果你認識 Lea Verou 的話,大概率知道這個網站,她徒手寫了幾十個 純CSS 實現的背景圖樣式。 網站上提供了她的代碼。
        如果你不認識她,那我一定要推薦你閱讀一下 《CSS揭秘(圖靈出品)》 這本書,它會讓你大受震撼!

        2. CSS3 Gradients

        ? 傳送門:http://www.standardista.com/cssgradients/

        除了 Lea Verou 的網站外,CSS3 Gradients 也提供了這類示例。同樣提供代碼下載。

        3. CSS Gradients with background-blend-mode

        ? 傳送門:https://bennettfeely.com/gradients/

        功能和前面兩個差不多,自己點開看看唄~

        4. CSS Flags

        ? 傳送門:http://www.standardista.com/CSS3gradients/flags.html

        使用 純CSS 的方式畫出多國國旗。“右鍵 - 檢查網頁源代碼” 可以獲取代碼。

        5. Hero Patterns

        ? 傳送門:https://heropatterns.com/

        Hero Patterns 是比較出名網站了,官方提供了幾十款紋理,你可以根據自己的需求設置兩種對比色和不透明度。 完成后會返回一段CSS代碼給你,不過和前面幾個網站有點不同的是,Hero Patterns 的背景圖使用了 base64 的方式去實現的,而不是 CSS 背景漸變 的方式。

        6. HUE.CSS

        ? 傳送門:http://evankarageorgos.github.io/hue/grid.html

        使用 CSS 背景漸變 的方式做出的數十款高端大氣的背景,網站上的所有案例都提供了代碼。

        7. Pure CSS Stripes Generator

        ? 傳送門:https://stripesgenerator.com/

        Pure CSS Stripes Generator 主要是幫你生成 條紋背景 的代碼。 你可以在網站上根據自己的需求設置條紋的顏色、大小、傾斜角度等屬性。 最后會返回一段 css 代碼給你。

        8. Glass Morphism

        ? 傳送門:https://glassgenerator.netlify.app/

        Glass Morphism 的功能是設置 毛玻璃背景 樣式,你可以在上面手動調節毛玻璃的不透明度、模糊度、背景色等屬性。 最后會返回 html 和 css 代碼給你。 非常好玩,趕緊去試試吧~

        9. uiGradients

        ? 傳送門:https://uigradients.com/

        提供了不同色系搭配的漸變代碼。如果你不太擅長配色,可以使用 uiGradients

        10. Gradient Colors Collection Palette

        ? 傳送門:https://webkul.github.io/coolhue/

        Gradient Colors Collection Palette 上有幾十個色卡,可以一鍵復制 css 代碼。

        11. Fresh Background Gradients

        ? 傳送門:https://webgradients.com/

        Fresh Background Gradients 提供了即使個配色方案,有雙色的,也有多色的。同樣提供一鍵復制 css 代碼。

        12. Cool Backgrounds

        ? 傳送門:https://coolbackgrounds.io/

        可以生成 5種類型 的背景圖片,并且提供多套成熟的配色方案供你選擇。 但該網站生成的是背景圖片,不是代碼。

        13. Svg Wave

        ? 傳送門:https://svgwave.in/

        生成波浪背景圖,可以自定義波浪的幅度、顏色等屬性。 支持 SVG 和 PNG 下載。

        14. Subtle Patterns

        ? 傳送門:https://www.toptal.com/designers/subtlepatterns/

        提供了幾十種紋理圖。

        15. Stripe Generator

        ? 傳送門:http://www.stripegenerator.com/

        可配置的條紋背景圖片。

        16. ZenBG

        ? 傳送門:https://galactic.ink/bg/

        在線設置紋理背景和漸變顏色,最后融合在一起生成一張好看的圖片。 同時還提供 css 代碼給你參考,告訴你如何更好的使用這張圖片。

        17. Patterninja

        ? 傳送門:https://patterninja.com/

        光看圖片介紹就知道這個網站好好玩。 Patterninja 幫你生成可平鋪的背景圖。

        18. The Pattern Library

        ? 傳送門:http://thepatternlibrary.com/

        提供幾十款可平鋪的好看背景。 注意:下載按鈕在網頁的左上角。

         
        (文/葉東哲)
        免責聲明
        本文僅代表作發布者:葉東哲個人觀點,本站未對其內容進行核實,請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內容,一經發現,立即刪除,需自行承擔相應責任。涉及到版權或其他問題,請及時聯系我們刪除處理郵件:weilaitui@qq.com。
         

        Copyright ? 2016 - 2025 - 企資網 48903.COM All Rights Reserved 粵公網安備 44030702000589號

        粵ICP備16078936號

        微信

        關注
        微信

        微信二維碼

        WAP二維碼

        客服

        聯系
        客服

        聯系客服:

        在線QQ: 303377504

        客服電話: 020-82301567

        E_mail郵箱: weilaitui@qq.com

        微信公眾號: weishitui

        客服001 客服002 客服003

        工作時間:

        周一至周五: 09:00 - 18:00

        反饋

        用戶
        反饋

        主站蜘蛛池模板: 亲子乱AV视频一区二区| 亚洲一区电影在线观看| 乱色熟女综合一区二区三区| 69久久精品无码一区二区| 日韩精品无码免费一区二区三区| 午夜福利一区二区三区在线观看 | 怡红院美国分院一区二区| 午夜DV内射一区区| 一区二区精品在线观看| 国产精品视频一区二区三区四| 久久伊人精品一区二区三区| 国产一区二区三区韩国女主播| 在线免费视频一区| 国模大尺度视频一区二区| 91精品国产一区| 日韩精品无码Av一区二区| 精品一区二区三区中文字幕| 无码精品尤物一区二区三区| 日韩熟女精品一区二区三区 | 亚洲欧美日韩一区二区三区在线 | 国产精品亚洲专区一区| 亚洲美女高清一区二区三区| 色偷偷一区二区无码视频| 精品一区二区三区高清免费观看| 一区免费在线观看| 中文字幕一区二区三匹| 日本高清无卡码一区二区久久| 亚洲色精品vr一区二区三区 | 韩国精品福利一区二区三区| 久久精品一区二区影院 | 好爽毛片一区二区三区四无码三飞| 波多野结衣中文字幕一区| 日本午夜精品一区二区三区电影| 日本一道一区二区免费看| 亚洲AV色香蕉一区二区| 一区二区三区观看| 无码一区二区三区免费视频| 久久99国产精一区二区三区| 日韩有码一区二区| 亚洲av日韩综合一区二区三区| 成人影片一区免费观看|