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 花样 程序员

---