6.9 CSS3 (渐变、过渡、2D转换)

CSS3课件-day08-渐变、过渡、2D转换

回顾

• css3新增选择器
• css3伪类选择器
• css3伪元素
• css3投影

目标

• 了解浏览器内核前缀
• 掌握css背景（重点）
• 掌握背景颜色过渡（重点）
• 掌握过渡动画（重点）
• 掌握2D转换（难点）

一、浏览器内核前缀

中国用户的浏览器市场份额：
UC、Android内置、Chrome、Safari、QQ Browser都是webkit内核，从图上看占了98%的市场份额。一定要伺候好-webkit-。 有的公司干脆只兼容-webkit-，别的兼容比如-ms-都不写。CSS3率先在手机端找到生长的土地了，手机端的页面大胆放心的使用CSS3属性、选择器。

1.1、私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

前缀	说明
-moz-	代表 firefox 浏览器私有属性
-ms-	代表 ie 浏览器私有属性
-webkit-	代表 safari、chrome 私有属性
-o-	代表 Opera 私有属性

1.2、提倡的写法

二、背景

2.4、背景裁切：background-clip

• background-clip表示背景裁切，如果值是content-box就表示padding区域没有背景，只有content区域有背景。

• background: url(images/0.jpg);
  background-clip: content-box;
  background-origin: content-box;
  

• 上面的语句等价于：

  background: url(images/0.jpg) content-box;
  

2.5、多背景

• 以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。
• 一个元素可以设置多重背景图像。
• 每组属性间使用逗号分隔。
• 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
• 但是，同一个盒子只能携带一个背景色，可以携带多个背景图。
• CSS3多组背景图

background: url(images/0.png) repeat-y,
	        url(images/shishi.jpg) no-repeat ,
		    url(images/0.jpg);

• background-position、background-size等等属性都能用逗号隔开数值了，表示对不同的图片来设置值。

  background-size: auto auto, 600px 100px, auto auto; 
  

三、过渡：transition

3.1、transition属性基本语法

• 就是过渡。让某一个元素从CSS状态A变为CSS状态B的时候不是干蹦，而是动画
• transition : 属性 时间 时间曲线 延迟时间.
  transitoin: all 2s linear 2s;
• 过渡书写步骤
  1. 先写好默认结构(状态)。
  2. 添加 :hover，书写最终(突变)状态。
  3. 添加过渡transition到默认状态，即可发生过渡。
     过渡transition经常配合 :hover 使用。
• 下面就是一个完整的过渡语法：

transition:all 1s ease 0s;

• 第1个参数： 就是想让什么属性参与过渡，如果想让所有属性参与过渡，写all

• 第2个参数： 就是过渡动画的时间，s表示秒，一定要写s，不要不写单位，也不要些别的；

• 第3个参数： 缓冲描述词，ease表示不匀速，匀速就是linear。

• 第4个参数： 延迟时间，0s就是不延迟。

• 贝塞尔曲线可以从http://cubic-bezier.com/ 生成：

  transition:all 2s cubic-bezier(.29,1.05,.78,.07) 0s;
  

3.2、什么属性能过渡?

• 基本所有属性都能过渡：
  background-color、background-position、background-image、border-radius、border、padding、font-size等等。
• 不能过渡的：
  渐变色、float
• 尤其要注意的是，jQuery中的animate函数，不支持background-color、background-position。 所以，如果想要制作背景颜色、背景定位的动画，必须使用CSS3。

3.3、什么时候触发过渡

• 任何对元素的CSS改变都能触发过渡。
• 不要认为只有:hover能够触发过渡。任何造成元素的改变，都会引发过渡。
• 比如元素的类名改变，能够触发过渡。
• 比如直接用JS来设置属性，也能够触发过渡。

四、2D变形

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

效果	属性
缩放	scale
移动：	translate
旋转	rotate
倾斜	skew

4.1、二维坐标系

4.2、移动 translate

设定元素从当前位置移动至给定的位置（x坐标 y坐标）

1.语法

方法	说明
translate(x,y)	2D转换，沿X和Y轴移动元素
translateX(n)	2D转换，沿X轴移动元素
translateY(n)	2D转换，沿Y轴移动元素

transform：translate(x, y)

• 定义 2D 转换，沿着 X 和 Y 轴移动元素
• translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
• translate类似定位，不会影响到其他元素的位置
• 对行内标签没有效果

让定位的盒子居中

.box {  
    width: 499.9999px; 
    height: 400px;  
    background: pink; 
    position: absolute; 
    left:50%;  
    top:50%; 
    transform:translate(-50%,-50%);  /* 走的自己的一半 */
}

4.3、缩放 scale

设定元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）的参数

方法	说明
scale(x,y)	2D缩放转换，改变元素的宽度和高度
scaleX(n)	2D缩放转换，改变元素的宽度
scaleY(n)	2D缩放转换，改变元素的高度

4.4、旋转 rotate

设定元素顺时针旋转给定的角度，负值表示逆时针旋转

transform:rotate(ndeg);

角度为正时，顺时针，角度为负时，为逆时针, 默认旋转的中心点是元素的中心点

值可以是正数，也可以是负数： transform:rotate(-90deg) 等价于transform:rotate(270deg)

transform-origin可以调整元素转换变形的原点！

transform-origin: x y;

div{
    transform-origin: left top;
    transform: rotate(45deg); 
} 
 /* 改变元素原点到左上角，然后进行顺时旋转45度 */

注意：旋转中心点是加给发生变化元素的默认状态。

4.5、倾斜 skew

设定元素翻转给定的角度，根据给定的水平线（X轴）和垂直线参数（Y轴）

方法	说明
skew(x-angle,y-angle)	2D倾斜转换，沿着X轴和Y轴
skewX(angel)	2D倾斜转换，沿着X轴
skewY(angle)	2D倾斜转换，沿着Y轴

transform:skew(30deg,10deg);

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

4.6、总结变形

如果想要有多个变形，用空格隔开；同时使用多个转换，其格式为：transform: translate() rotate() scale() …等，其顺序会影转换的效果。

transform: rotate(40deg)  translate(100px,200px)  scale(2,0.2)  skew(50deg,20deg) ;