[持续更新]CSS3学习笔记（二）渐变&圆角&阴影&变换&动画

1.  颜色模式

在网页中常见的颜色模式有：RGB，HSLA。

RGB 大家不陌生，分别代表red，green，blue。使用6位16进制数表示。#00FF00；

RGBA 就说多了一个Aplha透明通道。这个数值用0~1的数字来表示。rbga（255，255，255，0.3）；

HSLA 分别代表色调Hue，饱和度Saturation，亮度Light，透明度Alpha。

但是在实际应用中，通常是HSLA调整颜色，之后转换成rbg的颜色模式表示。

在兼容方面：IE8及以下版本不支持HSLA颜色表示法。

IE6及之前的版本不支持RGBA的，可以使用IE特有的滤镜来添加效果。

如果是图片，指定透明度使用opacity属性，该属性值也是0~1的数。

.image{
filter:Alpha(Opacity);/IE兼容代码/
opacity:0.2
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
2.  渐变

CSS3中新增的渐变可以说是使用CSS来代替图片完成美化效果，减少图片使用。

渐变分为线性渐变（linear-gradient），和发射渐变（radial-grandient）。

线性渐变语法：

background：linear-gradient(方向，开始颜色，结束颜色);

方向默认是从上到下渐变，可以指定left/to right, 还可以指定角度0deg, 或者左下角bottom left等，颜色可以指定多个，还可以对每部分颜色指定宽度等;

background：linear-gradient(red,blue);
background：linear-gradient(left,red,blue);
background：linear-gradient(45deg,red,blue);
background：linear-gradient(red,blue);
background：linear-gradient(45deg,red,blue);
background：linear-gradient(bottom left, red,blue);
background：linear-gradient(left, red 15%,orange 15%,blue 70%);<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
另外，该属性需要写明浏览器特有的标识，下面给出一个彩虹色的css渐变。

. linear-gradient {
background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
放射渐变跟线性渐变差不多，第一个参数为中心店位置，默认为中心。

#radial-gradient {
width: 300px;
height: 300px;
float: left;
border-radius:50%;
background:-webkit-radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);
background:-o-radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);
background:-moz-radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);
background:radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
在实际的工作中，渐变变得很有用。比如Bootstrap的按钮背景色就是渐变色，这样使得按钮有一种立体感，使人更容易点击。

3.  圆角和阴影

圆角属性：border-radius，该属性的值可以是像素，也可以是百分比。注意的是，当元素长宽比为1:1时，圆角值为50%即为原型，并且圆角值不会比50%更大。圆角的值不能超过长宽比的一半。

.radius {
border-radius:20px;/4个角都是相同的值/
-moz- border-radius:20px;/支持老版本FF/
-webkit- border-radius:20px;/支持老版本webkit内核/
}
也可指定4个角不同的圆角值。

.radius {
border-top-left-radius:20px;/左上/
border-top-right-radius:20px;/右上/
border-bottom-left-radius:20px;/左下/
border-bottom-right-radius:20px;/右下/
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
边框阴影跟之前讲的文字阴影很像。IE6~8不支持。

语法：box-shadow:{color 水平偏移垂直偏移 模糊距离 阴影尺寸 inset};

属性ps的同学可能会对这几个值比较熟悉，因为这些值也是ps中设置阴影的必须值。简单来说：

inset 内部阴影，可选为outset 外部阴影。决定阴影是对外还是对内。

水平偏移：阴影向右便宜的距离，负值表示向左。

阴影尺寸：就是阴影向外延伸出去的长度。

模糊距离：相当于是对阴影尺寸做了渐变，渐变长度就是设定的值。

另外，和边框不同的是，阴影是不占空间的。

3．变换和动画

CSS3中大家了解最多的要数其新增的变换和动画效果，新的属性可是实现以前只有javascript才能实现的效果，简化了网页编写的工作，提升了开发效率，当然也是十分的酷炫，而且节省流量。

1.  变换（transform）

transform属性有很多值：旋转（rotate），扭曲（skew），位移（translate），缩放（scale）。

1.1       rotate旋转变换

简单的2D旋转：会将元素按照中轴线顺时针旋转指定的角度。

.rotate {
transform:rotate(20deg);
-ms-transform:rotate(20deg);/* IE9 */
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
还可使用rotateX沿X轴向上旋转，rotateY沿Y轴向上旋转

.rotateX {
transform:rotateX(20deg);
-ms-transform:rotateX(20deg);/* IE9 */
-moz-transform:rotateX(20deg);
-webkit-transform:rotateX(20deg);
-o-transform:rotateX(20deg);
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
这里要注意的是，我们直观地感受就是在使用rotateX时，元素在纵向被压缩了，其实是元素的上半部分向内凹陷，下半部分向外突出形成的一种旋转效果。

 

复杂的3D效果：元素会沿着xyz轴构建向量，最后偏转一定角度。

rotate3d {
transform:rotate3d(1,0,0,10deg);
-ms-transform:rotate3d(0,1,0,10deg);
-moz-transform:rotate3d(0,0,1,10deg);
-webkit-transform:rotate3d(1,1,1,10deg);
-o-transform:rotate3d(0,0,0,10deg);
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

这里需要理解下：rotate3d共接受四个值，前三个值分别代表xyz是否旋转，1代表旋转，0代表不旋转；最后一个是旋转的角度。例子中的transform:rotate3d(1,0,0,10deg);其实就等价于transform:rotateX(10deg);当xyz轴都旋转时，相当于整个模型旋转。

这个还是比较抽象，需要具有一定的空间想象力。

不懂的可以看看这个：
http://jingyan.baidu.com/article/d621e8da0aa7192865913f05.html
1.2       skew扭曲变换

用过ps的同学会对这些熟悉些：

.skew {
transform:skew(30deg,10deg);
}

该属性接受两个参数：第一个参数是元素的中轴线沿着当前的中轴线逆时针旋转的角度，元素的水平线不变，第二个参数正好相反。

也可使用skewX,和skewY单一方向变换。

该属性不支持3D效果。

1.3       scale比例缩放

按照比例缩放：

.scale {
transform:scale(1.1,0.8);
}
该段代码表示元素按照原尺寸分别在横向和纵向上放大到1.1，0.8倍。

也可使用scaleX，scaleY，scaleZ在单个方向上缩放，不过会造成拉伸，图像失真。

1.4       translate位移变换

translate就是平面上的xy轴位移

.translate {
transform:translate(100px,200px);
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
也可使用translateX，translateY，translateZ，当方向位移。

2.  渐变（transition）

.transition {
height: 200px;
transition:height 1.0s;
}
.transition:hover {
height: 500px;
}
这个属性有点类似jquery的animaite属性，是一种简单的动画。

元素的高度200，当鼠标在其上悬停时高度变为500，这是一个瞬间的效果，用了该属性会是这个过程在1.0s内完成，这样我们看到的就是一个动画。

如果要同时改变多个属性，使用逗号隔开。

transition: width 1.0s, height 1.0s;

transition还可选择多种动画函数：

ease 逐渐变慢 默认；

linear 匀速

ease-in 加速

ease-out 减速

ease-in-out减速然后减速

cubic-bezier 自定义一个时间曲线

transition:all 0.5s ease-in-out 1s;/*1s表示动画的延迟时间*/<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
3.  关键帧（@keyframes）

使用关键帧来完成动画效果。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>animation</title>
<style type="text/css">
#keyframes{
width:200px;
height: 200px;
background-color: red;
float: left;
position: relative;
animation:myAnimate 5s infinite alternate;
-webkit-animation:myAnimate 5s infinite alternate;
}
@keyframes myAnimate {
0% {background-color: red;left: 0px; top: 0px;}
25% {background-color: red;left: 100px; top: 0px;}
50% {background-color: red;left: 100px; top: 100px;}
75% {background-color: red;left: 200px; top: 200px;}
100% {background-color: blue;left: 200px; top: 200px;}
}
@-webkit-keyframes myAnimate {
0% {background-color: red;left: 0px; top: 0px;}
25% {background-color: red;left: 100px; top: 0px;}
50% {background-color: red;left: 100px; top: 100px;}
75% {background-color: red;left: 200px; top: 200px;}
100% {background-color: blue;left: 200px; top: 200px;}
}

</style>
</head>
<body>
<div id="keyframes">

</div>
</body>
</html>

属性anmiation后面跟上动画名，动画执行一次的时间，动画训话的次数（infinite表示循环alertnate表示动画完成之后反向执行），和动画执行的速度（transition中的速度函数一致）。

@keyframes后面紧跟动画名称来定义动画，定义动画的每步执行操作。

也可为元素添加属性：

animate-play-state：paused;/*running用于启动动画*/
-webkit-animate-play-state：paused;

通过javascript容易来控制动画的暂停。