前几天看了一篇前端技术的文章 , 颠覆了我对CSS认识,让我知道CSS不仅仅只是一个简单的布局,单标签操作也能如此美轮美奂。
于是我迫不及待想跟你们一起分享分享。
操作指南
本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before 、::after 伪元素,transparent 、border,多重线性与径向渐变,多重内外阴影。
操作技巧
本文所有图形都会有个容器
包裹,其样式结构如下:
.css-cell{
position: relative;
width: 100%;
height: 300px;
}
所有图形都是在容器内实现的,其结构如下:
天气那一块有部分会多一个容器,其结构如下:
下面贴出图形的具体实现和相对应的样式代码
【代码获取 :前端学习交流裙:三三零三三六二八九,进裙邀请码(编号):寂静 , 不填不通过。
裙内不定时分享干货和各类源码,包括2018最新的前端企业案例学习资料和零基础入门教程,欢迎自学的小白和大神入群学习交流,分享技术。】
操作实战
心形:利用 圆形 和 正方形实现
气泡三角形:利用 border 的 transparent 特性实现
切角:使用线性渐变实现
单个颜色实现 hover 和 active 时的明暗变化效果:利用伪类及透明度实现
饼图:利用伪类、线性渐变、旋转实现
spectiveBlur:纯 CSS 方案实现背景变暗效果(hover按钮触发)
多云(cloudy)(单标签实现):利用线性渐变、阴影、缩放实现
彩虹(rainbow):利用border、box-shadow 实现
夜空璀璨(starry):利用 box-shadow 实现
雷电(thunder):利用阴影、border实现
波浪水纹效果(单标签实现):利用 background-size 、缩放、背景图 实现,如果没有单标签的限制,可以制作多道波纹,效果更真实
利用滤镜实现混合效果(单标签实现):利用 fliter:blur() 、filter:contrast() 实现
还有下面一些,我就不发代码了 ,避免文章显得太冗长,上面有代码获取地址。
分享完了,前端程序员的你,是不是又学到新知识啦。欢迎转载分享。
领取专属 10元无门槛券
私享最新 技术干货