本文主要介绍N多种全新的动画过场效果，实现简单，体验俱佳，主要用到的技术是clip-path和mask遮罩，以及CSS变量和animation的创新实现方法，一定会有所收获的。
文章关键字 ‘渐变’
你用的那些CSS转场动画可以换一换了
2019年05月27日，星期一写给自己看的CSS shapes布局教程
2019年02月2日，星期六
本文详细介绍CSS Shapes布局，兼容性不错，移动端项目和中后台项目都可以使用，可以实现很多很棒的布局效果，需要和浮动配合使用。不仅支持基础图形，还支持PNG，SVG图像，以及渐变图形的环绕效果。是非常值得学习的一种布局方式。
妙法攻略：渐变虚框及边框滚动动画的纯CSS实现
2018年08月30日，星期四
本文内容如题，介绍几个实现渐变虚线框的方法，介绍虚线滚动动画，实线滚动边框动画的实现，所有这些方法都是纯CSS实现，就算这些动画效果你实际项目用不到，但是其大开眼界的实现原理相信也会给你有所启示的。
一如既往，有demo实例，有源代码展示，和必要的截图，希望本文的内容能够对您的学习有所帮助。
几种CSS渐变背景图片transtion动画方法
2018年03月25日，星期日background-image不支持CSS3 transition，因此，当CSS3 gradient渐变作为背景图片存在的时候，直接设置transition是不会有过渡效果的，那该怎么办呢？
深入理解SVG feDisplacementMap滤镜及实际应用
2017年12月14日，星期四借助SVG feDisplacementMap滤镜可以实现非常有意思的水波效果。本文深入介绍feDisplacementMap滤镜的作用原理，同时展示其在实际项目中可以大规模实际应用的潜力。
10个demo示例学会CSS3 radial-gradient径向渐变
2017年11月23日，星期四实际开发的时候，当要使用radial-gradient径向渐变的时候，脑中会有大概的语法，但是细节却记不住，于是想快捷找个案例看看具体怎么用，然后直接套一下，本文就是满足类似此需求而写，共展示了10例常见使用案例，相信一定可以覆盖你的使用场景的。
CSS3 linear-gradient线性渐变实现虚线等简单实用图形
2017年10月27日，星期五我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景，也就是背景图片个数可以无限累加，正好CSS3的gradient渐变性质是background-image，于是，我们可以实现任意数量渐变背景图的叠加效果。甚至，理论上，任意彩色jpg图片都是可以使用CSS3渐变背景实现的。
当然我们实际开发的时候，是不会使用CSS3渐变来模拟一张图片的，更多是用来生成一些简单实用的图形。
本文就将通过实现虚线，三角以及加号减号等案例，展示下CSS3 linear-gradient线性渐变要图形生成技巧。
小tips: CSS3 webkit下彩条文字效果实现
2015年03月15日，星期日此效果用的是以前介绍过的两个技术实现，第一个就是CSS3实现纹理图案背景，第二个就是文字遮罩实现。两者合在一起就可以实现彩条文字效果了。
SVG图标颜色文字般继承与填充
2014年07月22日，星期二前文介绍了SVG Sprites身材和内涵，顺大便客观的评价了SVG Sprites比font-face高几层楼的事实（看看外国同行的对比）。但是呢，人总是这样，总是容不得说自己现在使用东西的不好。于是乎，不经意间戳动了点小小的自尊。导致文章也没细读就大肆反驳：SVG图标颜色要内联设置，不像font-face那样好控制！而且还不只一位兄弟这么说。
其实呢，我并不忍心说实话的：SVG图标颜色控制要比font-face有过之而无不及……
图层转CSS3 photoshop扩展CSS3Ps插件简介
2013年09月7日，星期六CSS3的世界已经愈发侵犯我们的世界，so，当下，很多设计师设计的东西都是通过CSS3来实现，而不是想办法弄一张图片，例如，一些渐变效果，投影等。
但是，有时候，我们的渐变可能是斜的，或者说起点不是从边缘开始。对于web重构人员来讲，要准确表达设计师的效果就比较头疼了。因为肉眼显然无法精确识别，现有的些工具大多测量尺寸、间距，获取颜色值之类，无法判断渐变的起止点或者投影的距离以及模糊程度。唯一的办法就是……
我的应用
我的应用