大体思想是，设计一个透明层i，skewx在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变linear-gradient，然后hover的时候，设置0.5s的动画时间。 同时在 i 层使用 cursor:pointer，如果不设置这个的话，需要等透明层动画之后才能看得到 pointer 指 ...
分类：
Web程序 时间：
2016-11-29 14:08:37
阅读次数：
221
线性渐变 语法：background: linear-gradient(direction, color-stop1, color-stop2, ...); ...
分类：
其他好文 时间：
2016-11-22 12:29:43
阅读次数：
179
有时我们会看到网站上的一些图片是渐变色的，这些图片有的是ui设计出来的，有的则是直接通过css3制作出来的。下面就讲一下css3实现渐变色的方法，以及在各个浏览器上的兼容性。 CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们 ...
分类：
Web程序 时间：
2016-11-19 15:30:27
阅读次数：
316
径向渐变，就是环形的渐变了，由圆心（或者是较小的同心圆）开始向外扩散渐变的效果，听着有些抽象，往下看图一下子就明白了。线性渐变指定了起点和终点，径向渐变则指定了开始的结束园的圆心和半径。这里使用createRadialGradient来获得Canvas的CanvasGradient对象，所以addC ...
分类：
其他好文 时间：
2016-11-15 00:46:08
阅读次数：
391
原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 原作很强悍 导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变（发散） 图形变形（平移、旋转、缩放） 矩阵变换（图 ...
分类：
Web程序 时间：
2016-11-14 12:03:10
阅读次数：
304
CSS3背景渐变效果 学习要点： 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能，主要有两种渐变方式：线性渐变和径向 （放射性）渐变。 一．线性渐变 linear-gradient背景颜色的渐变功能 CSS3提供了linear-gradient属性实现背景颜色的渐变功能。在 ...
分类：
Web程序 时间：
2016-10-21 10:58:04
阅读次数：
345
今天继续总结css3的一些css3新样式，先列一个简单的提纲，重要的还是圆角、阴影、渐变、文字缩略，最最重要的是过度transition，变换transform和animation圆角阴影渐变 圆形渐变 线性渐变 跳变 重复渐变蒙版倒影滤镜多背景文字方向文字缩略 过渡transition 变换tra ...
分类：
Web程序 时间：
2016-10-18 07:34:44
阅读次数：
185
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-s ...
分类：
其他好文 时间：
2016-10-16 23:38:24
阅读次数：
284
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核，主流内容主要有Mozilla（Gecko）（熟 ...
分类：
Web程序 时间：
2016-10-12 22:40:00
阅读次数：
161
原文链接：http://caibaojian.com/css3-background-gradient.html 整理一下关于css3背景渐变的写法，至于是怎么来的，可以看下面渐变的详细解释。 via在项目中，有很多地方都用到了背景线性渐变。如果在移动端还可以适当使用CSS3这个属性原文来自：htt ...
分类：
Web程序 时间：
2016-10-08 01:32:33
阅读次数：
207
