CSS 只是個簡單的布局？前端女程式設計師教你，花樣玩轉CSS

包裹，其樣式結構如下：

.css-cell{

position: relative;

width: 100%;

height: 300px;

}

所有圖形都是在容器內實現的，其結構如下：

天氣那一塊有部分會多一個容器，其結構如下：

下面貼出圖形的具體實現和相對應的樣式代碼

【前端學習交流裙,330336289，進裙邀請碼（編號）：寂靜 。歡迎自學的小白和大神。裙內不定時分享乾貨，包括2018最新的前端企業案例學習資料和零基礎入門教程，歡迎自學的小白和大神】

操作實戰

心形：利用 圓形 和 正方形實現

氣泡三角形：利用 border 的 transparent 特性實現

切角：使用線性漸變實現

單個顏色實現 hover 和 active 時的明暗變化效果：利用偽類及透明度實現

餅圖：利用偽類、線性漸變、旋轉實現

spectiveBlur：純 CSS 方案實現背景變暗效果（hover按鈕觸發）

多雲（cloudy）（單標籤實現）：利用線性漸變、陰影、縮放實現

彩虹（rainbow）：利用border、box-shadow 實現

夜空璀璨（starry）：利用 box-shadow 實現

雷電（thunder）：利用陰影、border實現

波浪水紋效果（單標籤實現）：利用 background-size 、縮放、背景圖 實現，如果沒有單標籤的限制，可以製作多道波紋，效果更真實

利用濾鏡實現混合效果（單標籤實現）：利用 fliter:blur() 、filter:contrast() 實現

還有下面一些，我就不發代碼了 ，避免文章顯得太冗長，上面有代碼獲取地址。

分享完了，前端程序員的你，是不是又學到新知識啦。歡迎轉載分享。

---

---

閱讀更多 編程王者之路 的文章

關鍵字: Rainbow 技術 花樣

---