前端女程序员教你，花样玩转CSS，它不只是一个简单的布局！

前几天看了一篇前端技术的文章 ， 颠覆了我对CSS认识，让我知道CSS不仅仅只是一个简单的布局，单标签操作也能如此美轮美奂。

于是我迫不及待想跟你们一起分享分享。

操作指南

本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before 、::after 伪元素，transparent 、border，多重线性与径向渐变，多重内外阴影。

操作技巧

本文所有图形都会有个容器

包裹，其样式结构如下：

.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() 实现

还有下面一些，我就不发代码了 ，避免文章显得太冗长，上面有代码获取地址。

​

分享完了，前端程序员的你，是不是又学到新知识啦。欢迎转载分享。