前几天看了一篇前端技术的文章 ， 颠覆了我对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() 实现
还有下面一些，我就不发代码了 ，避免文章显得太冗长，上面有代码获取地址。
分享完了，前端程序员的你，是不是又学到新知识啦。欢迎转载分享。
网友评论