好玩的 CSS - 40 個有趣的 CSS 網站

2021-12-24 高級前端進階
🌐 基礎學習

cssreference.io/[1] CSS 參考書

chokcoco.github.io/CSS-Inspira…[2] CSS 靈感

www.awwwards.com/sites/zero-…[3] UI 設計師的靈感源泉

htmlcheatsheet.com/css/[4] 交互式在線 CSS 速記表

zh.learnlayout.com/[5] 學習 CSS 布局

css-tricks.com/[6] CSS 小花招

web.dev/learn/css/[7] web.dev 上的 CSS 教學專欄

www.w3schools.com/howto/[8] W3 How To 學習如何實現常見的頁面組件

codemyui.com/tag/pure-cs…[9] 450 多個純 CSS 實現的 UI 設計 by Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀

🧚 CSS 動畫

純 CSS 動畫，這裡不包含 JS 動畫庫

animate.style/[10] CSS 動畫集

tholman.com/obnoxious/[11] 不過腦子的動效，不過看起來很「猛」

elrumordelaluz.github.io/csshake/[12] CSS 抖動特效

animxyz.com/[13] CSS 三維變換動畫

animista.net/play/[14] CSS 動畫集，可自由調節動畫參數，生成代碼片段

ianlunn.github.io/Hover/[15] CSS 滑鼠懸浮動畫

www.minimamente.com/project/mag…[16] 適合做專場動畫的 CSS 動效

🕹️ 教學遊戲

cssgridgarden.com/[17] 通過給蘿蔔澆水，學習 CSS 網格布局

www.flexboxdefense.com/[18] CSS 塔防遊戲，學習 flex 布局

flukeout.github.io/[19] 通過做飯，練習 CSS 選擇器

flexboxfroggy.com/[20] 送小青蛙回家，學習 flex 布局

🎰 代碼生成

cssboxshadow.com/[21] 盒子陰影 box-shadow 生成器

glassgenerator.netlify.app/[22] 磨砂透明效果

coolbackgrounds.io/[23] 酷酷的背景圖

www.pixelartcss.com/[24] 自定義像素素材

stripesgenerator.com/[25] 布條背景圖生成器

svgwave.in/[26] 波紋生成器

numl.design/theme-gener…[27] numl design 的主題生成器

color.adobe.com/zh/create/c…[28] adobe 針對色盲用戶可訪問性，提供的一個色彩拾取工具

9elements.github.io/fancy-borde…[29] 圓角 border-radius 的新玩法

根據上面的圓角，我們可以畫出一滴水珠💦 codepen.io/prathkum/pe…[30]

accordionslider.com/[31] 純 CSS 實現百葉窗

grid.layoutit.com/[32] 網格布局生成器

csslayout.io/[33] 純 CSS 實現的一套頁面元素、組件集

keyframes.app/animate/[34] CSS 動畫生成器

cssanimate.com/[35] 又一個 CSS 動畫生成器

www.cssfiltergenerator.com/[36] CSS 濾鏡

imageslidermaker.com/[37] CSS 輪播生成器，依賴 jQuery 😂

www.30secondsofcode.org/css/p/1[38] 30 秒代碼片段 — CSS 篇

🎨 色彩搭配

colorhunt.co/[39] Color Hunt

mycolor.space/[40] 還是配色

clrs.cc/[41] 還是配色

cssgradient.io/[42] CSS 漸變色

參考：github.com/jobbole/awe…[43] CSS 資源大全中文版github.com/awesome-css…[44] Awesome CSSjuejin.cn/post/690371…[45] 一些CSS特效網站整理

相關焦點

  • 有趣的css屬性content
    今天說一個非常有趣的css屬性content，可能很多人都會說，這個屬性誰會不知道，對於一些老手來說，這個屬性確實可能是經常會用到，但是總會有你沒有發現的地方
  • CSS入門筆記 - 初識CSS
    您可以將樣式從它的內容分離出來，以便您能夠：避免重複更容易維護為不同的目的，使用不同的樣式而內容相同例如:您的網站可能有成千上萬的頁面外觀相似。使用CSS，您可以將樣式信息存儲在公共的文件中以供所有的頁面共用。當用戶顯示頁面時，用戶的瀏覽器將樣式信息和頁面內容一同加載。
  • 使用 PostCSS 插件讓你的網站支持暗黑模式
    換膚方案css variablescss variables 是 Web 標準實現了對深色模式的支持，以下代碼是通過 CSS 媒體查詢，最簡單的實現。大家都知道 https://astexplorer.net/ 這個網站，可以用來寫 babel 插件，不知道是否使用過其他解析器？這邊選擇 CSS 和 postcss 這樣就可以將 css 解析成 CSS AST (抽象語法樹)了。astexplorer.net目的
  • 能解決 80% 需求的 10個 CSS動畫庫
    CSShake 1.Animista 網站地址:http://animista.net/網站描述:在線生成 css 動畫Animista是一個在線動畫生成器，同時也是一個動畫庫，它為我們提供了以下功能1.
  • CSS樣式表和選擇器
    具體操作如下：我們先在html頁面的同級目錄下新建一個a.css文件，那說明這裡面的代碼全是css代碼，此時就沒有必要再寫<style>標籤這幾個字了。a.css的代碼如下：p{ border: 1px solid red; font-size: 40px;}上方的css代碼中，注意像素要帶上px這個單位，不然不生效。
  • HTML+CSS:三種css的引入方式,內鏈式、嵌入式、外部式
    上篇文章我們簡單介紹了css的概念以及語法，本篇文章我們將為大家介紹下css的三種引入方式。（1）內鏈式引入內鏈式css樣式表就是把css代碼直接寫在現有的HTML標籤中，具體的使用方法如下面所示：<divstyle="color:red">設置文字的顏色為紅色</div>這裡要注意：樣式的內容寫在元素的開始標籤裡，並且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設置可以寫在一起，中間用分號隔開
  • CSS圖像 hover 動畫效果
    CSS  Hover 在網頁設計中是極為常用的一個 CSS 效果，只要你有創造力，都可以讓 Hover 變得更多姿多彩，今天我們主要分享40
  • 10 個值得收藏的 CSS 資源
    Cubic Curve官方網站：https://cubic-bezier.com/基本上，它的作用是為你在css中的動畫生成貝塞爾曲線(cubic-bezier)。我們知道，使用動畫的ease-in、ease-out等屬性可以告訴瀏覽器動畫的流程是什麼。而你則可以在這裡自定義這些屬性。
  • 可能是最強大的 CSS 動畫庫!
    cubic-bezier(0.215, 0.61, 0.355, 1);    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);  }  40%
  • 《前端5分鐘》之使用純css實現網站換膚和焦點圖切換動畫
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫今天我們來繼續復盤一些工作中常用的css技巧和知識,以便我們可以更加優雅的用css實現富有動感的網站.
  • DIV+CSS規範命名大全集合
    一、命名規則說明1）、所有的命名最好都小寫2）、屬性的值一定要用雙引號("")括起來，且一定要有值如class="divcss5",id="divcss5"3）、每個標籤都要有開始和結束，且要有正確的層次，排版有規律工整4）、空元素要有結束的tag或於開始的tag後加上"/"5）、表現與結構完全分離，代碼中不涉及任何的表現元素
  • css布局史 - grid一統天下
    而作為前端三劍客的css呢？似乎css3已經是很久很久的事情了，久到了我們不知道它是否還在更新，css是否還有新的技術產生。雖然各種scss，stylus，less預處理器提高了我們代碼的開發和維護，但是css依然缺少一個一擊致命，一劍封喉的技術。
  • 程序屋|令人驚豔的CSS框架TailWindCSS的安裝使用教程
    在vue2中安裝tailwindcss遇到了各種坑，不是版本不兼容，就是缺個文件，還是那種怎麼都安裝不了的...在安裝-卸載-安裝-卸載重複排查了幾十次之後，總算安裝成功。最好還是用自己新建tailwindcss.css的方式import "./assets/tailwindcss.css"在項目根目錄執行以下命令：注意：一定要加-p，才會生成兩個文件。
  • Charts.css:一個數據可視化開源神器
    Charts.css是用於數據可視化的新的開源框架。它用CSS框架代替了傳統的JS圖表庫。傳統的圖表庫往往使用JS渲染數據，嚴重依賴JS，大型的JS庫通常會影響網站性能，搜尋引擎也無法讀取存儲在JS對象中的數據。
  • 聊聊純 CSS 圖標
    現有方案有個名為 `css.gg`[8] 的純 CSS 圖標解決方案，它完全通過偽元素（::before，::after）來構建圖標。使用這種方案意味著你需要對 CSS 工作原理有深刻的理解，但同時也很難創造更為複雜的圖標（只有3個元素可以使用）。
  • HTML+CSS:圖文結合讓你深入理解css盒模型
    本篇文章要給大家講的算是比較重點的內容了，css盒模型。理解了它對你以後頁面的排版和布局有著非常關鍵的作用。什麼是css盒模型？css盒子模型 又稱框模型 (Box Model) ，它包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。下圖就為我們標準的盒模型示意圖。css盒模型進階練習1）我們來看下邊的一個例子。
  • 【小筆記】網頁設計-表格、層、css
    百度隨機出來的看來也不是個好的選擇。。。。有好多童鞋表示完全懵了，老師表示很理解你們的心情！接上次關於頁面之後，上課講了作品/產品列表頁。這個的重點在於如何使用表格。也就是<table>標籤。在DW的常用標籤裡就有插入表格的按鈕，點擊可以插入表格。表格可以設置列、行數，可以設置邊框的邊距和邊框線條等。
  • 使用CSS Flexbox 構建可靠實用的網站 Header
    在 CSS3 沒有普及的時候，創建一個網站 header 是一項既可怕又困難的任務 ?。那時，Flexbox 還是個新東西，我們不得不使用老方法，比如 float和clearfix技術。今天，情況完全不同了，Flexbox 得到了廣泛的支持，大大的減少了我們的開發工作，同時也為我們提供了更多的可能性。
  • CSS樣式就應該這麼寫—CSS參考樣式集合
    如今我們的網站、頁面更加需要注重細節，不論是字體的樣式、還是圖片的解析度清晰度都會影響到用戶的訪問體驗和PV，以及用戶以後是否會回訪我們的網站
  • CSS Modules 與 scoped 的不一樣
    具體效果demo// webpack.config.js{  test: /\.css$/,  loader: 'style!css-loader?$style.green 是個變量，即可在js中引用，引用方式為：this.$style.green。modules 即為啟用，localIdentName 是設置生成樣式的命名規則。應用場景只應用於某個組件，其他組件不適用。