渐变 css3 过渡

渐变
线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, …);线性渐变
direction取值(此参数可省略)：
angle：通过角度来确定渐变的方向，0度表示渐变方向从下向上，90度表示渐变方向从左向右。如果取值为负值，其角度按逆时针方向旋转。
关键词：通过关键词来确定渐变的方向（to left/right/bottom/top）

两种写法：
div{width:700px;height:500px;background:linear-gradient(to top,#336,#F63);
background:-moz-linear-gradient(top,#336,#F63);
background:-webkit-linear-gradient(top,#336,#F63);}

苹果浏览器不支持to关键字的写法，角度的写法支持但是解释跟其他浏览器不同；
百分比/像素：
（1）书写的百分比值/像素，为开始的位置，显示实体颜色；
（2）如果前面有比当前的颜色值百分比大的，会自动将当前颜色值的百分比设置为前面颜色中的最大百分比值;
（3）渐变区域：后面颜色的百分比/像素值减去前面颜色的百分比值/像素得到的结果

background: repeating-linear-gradient(red, yellow 10%, green 20%);重复线性渐变：
p{width:300px;height:300px;background:-moz-repeating-linear-gradient(top, red 10%,#000 20%, #0092b7 30%
);}
p{width:300px;height:300px;background:repeating-linear-gradient(to top, red 10px,#000 20px, #0092b7 30px
);}
径向渐变
background: radial-gradient(shape , start-color, …, last-color);径向渐变
shape
主要用来定义径向渐变的形状。其主要包括两个值circle和ellipse：
circle：径向渐变是一个圆形(也就是用来指定圆形的径向渐变)
ellipse：径向渐变是一个椭圆形(也就是用来指定椭圆形的径向渐变)。

background: radial-gradient(red 5%, green 15%, blue 60%);
默认情况下，径向渐变颜色节点是均匀分布的，不过也可以为每一种颜色添加百分比，来使得各个颜色节点不均匀分布。

div{width:200px; height:150px; line-height:150px; text-align:center; color:white; }
#div1{background:-webkit-radial-gradient(red,green,blue);margin-bottom:10px;}
 #div2{background:-webkit-radial-gradient(red 5%,green 30%,blue 60%);}

颜色均匀分布

颜色不均匀分布

repeating-radial-gradient() 用于重复径向渐变;一个重复的径向渐变需要设置每个颜色占的百分比或者像素数；
#grad {
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%)
background: -webkit-repeating-radial-gradient(red, yellow 5px, green 15px)
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

css3 2d转换
CSS3 转换
通过CSS3转换，能够对元素进行移动、缩放、转动、拉伸,转换是使元素改变形状、尺寸和位置的一种效果。
2D Transform 方法
函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

translate(x，y) 方法：元素从其当前位置，根据给定的left(x 坐标) 和 top(y 坐标)位置参数进行移动;
translateX(n)：定义 2D 转换，沿着 X 轴移动元素。
translateY(n)：定义 2D 转换，沿着 Y 轴移动元素。

rotate(deg)：定义2D旋转，在参数中规定角度;正值是顺时针旋转，负值为逆时针旋转；

rotate和translate同时使用，当书写顺序不同时，会影响显示效果
例如：.box:hover div{transform:rotate(90deg) translateX(100px)}-图一
.box:hover div{transform:translateX(100px) rotate(90deg) }-图二

scale(number,number)：指定对象的2D缩放,第一个参数对应X轴，第二个参数对应Y轴，如果第二个参数未提供，则默认取第一个参数的值
scaleX(number)：指定对象X轴的（水平方向）缩放
scaleY(number)：指定对象Y轴的（垂直方向）缩放

skew(angle ,angle)：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX(angle)：指定对象X轴的（水平方向）扭曲
skewY(angle)：指定对象Y轴的（垂直方向）扭曲

rotate和skew同时使用，当书写顺序不同时，会影响显示效果
例如：.box:hover div{transform:rotate(90deg) skewX(30deg)}-图一
.box:hover div{transform:skewX(30deg) rotate(90deg) }-图二

css3 2D转换-扩展
matrix() 方法 矩阵
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素。
div#div2{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 /
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Firefox /
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Safari and Chrome /
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Opera */
}

transform-origin:设置或检索对象以某个原点进行转换。 2D转换可以改变元素的X和Y轴，默认值为：50% 50%，等同于center center （3D转换元素，可以更改元素的Z轴）。
属性值：
X轴：
percentage：用百分比指定坐标值。
length：用长度值指定坐标值。
left：指定原点的横坐标为left
center：指定原点的横坐标为center
right：指定原点的横坐标为right
Y轴：
percentage：用百分比指定坐标值。
length：用长度值指定坐标值。
top：指定原点的纵坐标为top
center：指定原点的纵坐标为center
bottom：指定原点的纵坐标为bottom

css3 过渡
CSS3 过渡
通过CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下，使元素从一种样式变换为另一种样式时为元素添加效果。
兼容：
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本，不支持 transition 属性。
Chrome 25 以及更早的版本，需要前缀 -webkit-。

下表列出了所有的过渡属性

transition-property:none | all | indent
属性值：
none：没有属性改变,transition马上停止执行；
all：所有属性改变,这个也是其默认值；当为all 时，则元素产生任何属性值变化时都将执行transition效果；
indent:元素属性名,指定元素的某一个属性值；

transition-duration:规定完成过渡效果需要花费的时间（以秒或毫秒计）；其默认值是0，也就是变换时是即时的；

transition-timing-function:规定过渡效果的时间曲线

transition-timing-function:cubic-bezier(['kjuːbɪk])贝塞尔曲线
cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。(x1, y1, x2, y2)四个值特定于曲线上点P1和点P2，所有值需在[0, 1]区域内，否则无效。
http://cubic-bezier.com/

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，属性值为数字单位为s（秒），它的使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。
默认大小是”0″，也就是变换立即执行，没有延迟。

transition:后面有多个属性值时,用逗号隔开;
transition:property duration timing-function delay ,
property duration timing-function delay;

需要值得注意的一点：transition-delay与 transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个时间为 transition-duration第二个为transition-delay。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
（1）指定要添加效果的CSS属性 ；
（2）指定效果的持续时间；
注意：如果时长未规定，则不会有过渡效果，因为默认值是 0。CSS 属性改变的典型时间是鼠标指针位于元素上时.
在转换概念当中：是没有display这么一说的，通过改变元素的透明度去实现从无到有；