第八课时:CSS3 高级应用
2.8.1 过渡
CSS3 提供的过渡属性,可以在不使用 Flash 的动画或者 JavaScript 脚本的情况下,为元素从一种 样式转变为另一种样式时添加效果,如:渐显、渐弱、动画快慢 等
transition-property 属性
用于指定应用过渡效果的 CSS 属性的名称,通常在用户将指针移动到元素上时发生,当指定的 CSS 属性改变时,过渡效果才开始
属性值 | 说明 |
---|---|
none | 没有属性会获得过渡效果 |
all | 所有属性都将获得过渡效果 |
property | 定义应用过渡效果的 CSS 属性名称,多个名称之间以逗号隔开 |
语法格式:
transition-property: none | all | property;
<head>
<style type="text/css">
/* 设置 div 的宽高,字体变粗 */
div { width: 400px; height: 200px; font-weight: bold; }
div:hover {
background-color: blue;
-webkit-transition-property: background-color; /* Safari、Chrome 浏览器兼容代码 (-webkit-) */
-moz-transition-property: background-color; /* Firefox 浏览器兼容代码 (-moz-) */
-o-transition-property: background-color; /* Opera 浏览器兼容代码 (-o-) */
}
</style>
</head>
<body>
<div> 使用 transition-property 属性 改变元素背景颜色 </div>
</body>
transition-duration 属性
定义过渡效果所花费的时间,默认值为 0,常用单位是 秒(s) 或 毫秒(ms)
语法格式:
transition-duration: time;
<head>
<style type="text/css">
/* 设置 div 的宽高,字体变粗 */
div { width: 400px; height: 200px; font-weight: bold; }
div:hover {
/* 改变元素背景颜色 */
background-color: blue;
-webkit-transition-property: background-color;
-moz-transition-property: background-color;
-o-transition-property: background-color;
/* 指定过渡效果所花费的时间 */
-webkit-transition-duration: 5s; /* Safari、Chrome 浏览器兼容代码 (-webkit-) */
-moz-transition-duration: 5s; /* Firefox 浏览器兼容代码 (-moz-) */
-o-transition-duration: 5s; /* Opera 浏览器兼容代码 (-o-) */
}
</style>
</head>
<body>
<div> 使用 transition-duration 属性 定义过渡效果发费的时间 </div>
</body>
transition-timing-function 属性
规定过渡效果的速度曲线,默认值为 “ease”
属性值 | 说明 |
---|---|
linear | 指定以相同速度开始至结束的过渡效果,等同于:cubic-bezier(0,0,0,1) |
ease | 指定以慢速开始,然后加快,最后慢慢结束的过渡效果,等同于:cubic-bezier:(0,25,0.1,0,35,1) |
ease-in | 指定以慢速开始,然后逐渐加快(淡入效果)的过渡效果,等同于:cubic-bezier(0,0,0.58,1) |
ease-out | 指定以慢速结束(淡出效果)的过渡效果,等同于:cubic-bezier(0,42,0,0.58,1) |
ease-in-out | 指定以慢速开始和结束的过渡效果,等同于:cubic-bezier(0,42,0,0.58,1) |
cubic-bezier(n,n,n,n) | 定义用于加速或减速的贝赛尔曲线的形状,它们的值在0~1 |
语法格式:
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
<head>
<style type="text/css">
/* 设置 div 的宽高,字体变粗 */
div { width: 400px; height: 200px; font-weight: bold; }
div:hover {
/* 改变元素背景颜色 */
background-color: blue;
-webkit-transition-property: background-color;
-moz-transition-property: background-color;
-o-transition-property: background-color;
/* 指定过渡效果所花费的时间 */
-webkit-transition-duration: 5s;
-moz-transition-duration: 5s;
-o-transition-duration: 5s;
/* 指定动画以慢速开始和结束的过渡效果 */
-webkit-transition-timing-function: ease-in-out; /* Safari、Chrome 浏览器兼容代码 */
-moz-transition-timing-function: ease-in-out; /* Firefox 浏览器兼容代码 */
-o-transition-timing-function: ease-in-out; /* Opera 浏览器兼容代码 */
}
</style>
</head>
<body>
<div> 使用 transition-duration 属性 指定过渡效果的速度曲线 </div>
</body>
transition-delay 属性
规定过渡效果从何时开始,默认值为 0,常用单位是 秒(s) 或 毫秒(ms)
属性值可以 为 正整数、负整数 和 0
- 当设置为负数时,过渡动作会从该时间点开始,之前的动作被截取
- 设置为正数时,过渡动作会延迟触发
语法格式:
transition-delay: time;
<head>
<style type="text/css">
/* 设置 div 的宽高,字体变粗 */
div { width: 400px; height: 200px; font-weight: bold; }
div:hover {
/* 改变元素背景颜色 */
background-color: blue;
-webkit-transition-property: background-color;
-moz-transition-property: background-color;
-o-transition-property: background-color;
/* 指定过渡效果所花费的时间 */
-webkit-transition-duration: 5s;
-moz-transition-duration: 5s;
-o-transition-duration: 5s;
/* 指定动画以慢速开始和结束的过渡效果 */
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
/* 指定动画延迟 2秒触发 */
-webkit-transition-delay: 2s; /* Safari、Chrome 浏览器兼容代码 */
-moz-transition-delay: 2s; /* Firefox 浏览器兼容代码 */
-o-transition-delay: 2s; /* Opera 浏览器兼容代码 */
}
</style>
</head>
<body>
<div> 使用 transition-delay 属性 指定过渡效果延迟触发 </div>
</body>
transition 属性
复合属性,用于在一个 属性中设置 transition-property、transition-duration、transition-timing-function、transition-delay 四个过渡属性
无论单个属性还是简写属性,使用时都可以实现多个过渡效果
如果设置 简写属性 可以设置多种过渡效果,需要为每个过渡属性集中指定所有的值,并且使用逗号进行分隔
语法格式:
transition: property duration timing-function delay;
/* 指定 边框 过渡时间5s,以慢速开始和结束,延迟2秒触发 */
transition: border-radius 5s ease-in-out 2s;
2.8.2 变形
CSS3 中,通过 transform 属性 可以实现变形效果,如:移动、倾斜、缩放 以及 翻转元素 等
认识 transform 属性
transform 属性 的默认值为 none,适用于内联元素和块元素,表示不进行变形
transform-function 用于设置变形函数,可以是一个或多个变形函数列表
transform-function 函数 | 说明 |
---|---|
matrix() | 定义矩形变换,即:基于 X 和 Y 坐标重新定位元素的位置 |
translate() | 移动元素对象,即:基于 X 和 Y 坐标重新定位元素 |
scale() | 缩放元素对象,可以使任意元素对象尺寸发生变化,取值包括正数、负数 和 小数 |
rotate() | 旋转元素对象,取值为一个度数值 |
skew() | 倾斜元素对象,取值为一个度数值 |
语法格式:
transform: none | transform-functions;
2D 转换
transform 属性 可以实现 元素的 平移、缩放、旋转、倾斜 及 旋转 效果,这些变形才做都是以元素的中心点为基准进行的
-
平移
使用 translate() 方法 能够重新定义元素的坐标,实现平移效果。该函数包含两个参数,用于定义 X轴 和 Y 轴坐标
translate() 方法 移动元素时,基点默认为元素的中心点,然后指定 X 坐标 和 Y 坐标 进行移动
语法格式: transform: translate(x-value, y-value);
<head> <style type="text/css"> /* 设置 div 的宽高,字体变粗 */ div { width: 400px; height: 200px; } div { transform: translate(100px, 30px); -ms-transform: translate(10px, 20px); /* IE9 浏览器兼容代码 */ -webkit-transform: translate(100px, 20px); /* Safari、Chrome 浏览器兼容代码 */ -moz-transform: translate(100px, 20px); /* Firefox 浏览器兼容代码 */ -o-transform: translate(100px, 20px); /* Opera 浏览器兼容代码 */ } </style> </head> <body> <div> 使用 translate() 方法 平移元素 </div> </body>
-
缩放
scale() 用于缩放元素大小,该函数包含两个参数值,分别用来定义 宽度(X轴)和 高度(Y轴)的缩放比例
x-axis 和 y-axis 参数值可以是 正数、负数 和 小数
- 正数:放大元素
- 负数:翻转元素,然后再缩放元素
- 小数:小于 1 的小数可以缩小元素
语法格式: transform: scale(x-axis, y-axis);
<head> <style type="text/css"> /* 设置 div 的宽高 */ div { width: 400px; height: 200px; } div { transform: scale(2,3); -ms-transform: scale(2,3); /* IE9 浏览器兼容代码 */ -webkit-transform: scale(2,3); /* Safari、Chrome 浏览器兼容代码 */ -moz-transform: scale(2,3); /* Firefox 浏览器兼容代码 */ -o-transform: scale(2,3); /* Opera 浏览器兼容代码 */ } </style> </head> <body> <div> 使用 scale() 方法 放大缩放属性 </div> </body>
-
倾斜
skew() 方法 能够让元素倾斜,该函数包含两个参数值,分别用来定义 X轴 和 Y轴 坐标倾斜的角度
x-angle 表示相对于 X轴 进行倾斜,y-angle 表示相对于 Y轴 进行倾斜。如果省略了第二个值,则取默认值 0
语法格式: transform: skew(x-angle, y-angle);
<head> <style type="text/css"> /* 设置 div 的宽高 */ div { width: 400px; height: 200px; } div { transform: skew(20deg, 30deg); -ms-transform: skew(20deg, 30deg); /* IE9 浏览器兼容代码 */ -webkit-transform: skew(20deg, 30deg); /* Safari、Chrome 浏览器兼容代码 */ -moz-transform: skew(20deg, 30deg); /* Firefox 浏览器兼容代码 */ -o-transform: skew(20deg, 30deg); /* Opera 浏览器兼容代码 */ } </style> </head> <body> <div> 使用 skew() 进行倾斜 </div> </body>
-
旋转
rotate() 方法 能够旋转指定的元素对象,主要在二维空间内进行操作。该方法允许传入负值,元素将逆时针旋转
语法格式: transform: rotate(angle);
<head> <style type="text/css"> /* 设置 div 的宽高 */ div { width: 400px; height: 200px; } div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE9 浏览器兼容代码 */ -webkit-transform: rotate(30deg); /* Safari、Chrome 浏览器兼容代码 */ -moz-transform: rotate(30deg); /* Firefox 浏览器兼容代码 */ -o-transform: rotate(30deg); /* Opera 浏览器兼容代码 */ } </style> </head> <body> <div> 使用 rotate() 进行旋转 </div> </body>
-
更改变换的中心点
transform-origin 属性 可以 改变元素的中心点
如果一个元素需要设置多种变形效果,可以使用空格把多个变形属性值隔开
参数值介绍:
- x-axis:定义视图被置于 X轴 的何处。可能的值有:left、center、right、length、%
- y-axis:定义视图被置于 Y轴 的何处。可能的值有:top、center、bottom、length、%
- z-axis:定义视图被置于 Z轴 的何处。可能的值有:length
语法格式: transform-origin: x-axis y-axis z-axis;
<head> <style type="text/css"> /* 设置 div 的宽高 */ div { width: 400px; height: 200px; } div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE9 浏览器兼容代码 */ -webkit-transform: rotate(30deg); /* Safari、Chrome 浏览器兼容代码 */ -moz-transform: rotate(30deg); /* Firefox 浏览器兼容代码 */ -o-transform: rotate(30deg); /* Opera 浏览器兼容代码 */ transform-origin: 20% 40%; /* 更改原点坐标位置 */ } </style> </head> <body> <div> 使用 transform-origin 属性 更改坐标中心点 </div> </body>
3D 转换
-
rotateX() 方法
用于指定元素围绕 X轴 旋转
参数 a 用于定义旋转的角度值,单位为 deg。值为正数时,元素围绕 X轴 顺时针旋转,负数时,逆时针旋转
语法格式: transform: rotateX(a);
<head> <style type="text/css"> /* 设置 div 的宽高 */ div { width: 400px; height: 200px; } div { transform: rotateX(30deg); -ms-transform: rotateX(30deg); /* IE9 浏览器兼容代码 */ -webkit-transform: rotateX(30deg); /* Safari、Chrome 浏览器兼容代码 */ -moz-transform: rotateX(30deg); /* Firefox 浏览器兼容代码 */ -o-transform: rotateX(30deg); /* Opera 浏览器兼容代码 */ } </style> </head> <body> <div> 使用 rotateX() 方法围绕 X轴 旋转 </div> </body>
-
rotateY() 方法
用于指定元素围绕 Y轴 旋转
参数 a 用于定义旋转的角度值,单位为 deg。值为正数时,元素围绕 Y轴 顺时针旋转,负数时,逆时针旋转
语法格式: transform: rotateY(a);
<head> <style type="text/css"> /* 设置 div 的宽高 */ div { width: 400px; height: 200px; } div { transform: rotateY(30deg); -ms-transform: rotateY(30deg); /* IE9 浏览器兼容代码 */ -webkit-transform: rotateY(30deg); /* Safari、Chrome 浏览器兼容代码 */ -moz-transform: rotateY(30deg); /* Firefox 浏览器兼容代码 */ -o-transform: rotateY(30deg); /* Opera 浏览器兼容代码 */ } </style> </head> <body> <div> 使用 rotateX() 方法围绕 Y轴 旋转 </div> </body>
rotateZ() 方法
rotateZ() 函数 和 rotateX() 函数、rotateY() 函数 功能一样,区别在于 rotateZ() 函数 用于制定一个元素围绕 Z轴 旋转
仅从视觉角度上看,rotateZ() 函数让元素顺时针或逆时针旋转,与 rotate() 效果等同,但它不是在 2D 平面上的旋转
-
rotate3D() 方法
在三维空间里,轴的旋转是围绕一个 [x,y,z] 向量并经过元素原点
属性值:
- x:代表横向坐标位移向量的长度
- y:代表纵向坐标位移向量的长度
- z:代表 Z轴 位移向量的长度
- angle:角度值,主要用来指定元素在 3D 空间旋转的角度。值为正数时,顺时针旋转,负数时,逆时针旋转
其他转换属性及方法
转换属性 | 说明 |
---|---|
transform | 向元素应用 2D 或 3D 转换 |
transform-origin | 允许改变被转换元素的位置 |
transform-style | 规定被嵌套元素如何在 3D 空间中显示 |
perspective | 规定 3D 元素的透视效果 |
perspective-origin | 规定 3D 元素的底部位置 |
backface-visibility | 定义元素在不面对屏幕时是否可见 |
转换方法 | 说明 |
---|---|
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换没使用 16个值 的4*4矩阵 |
translate3d(x,y,z) | 定义 3D 转换 |
translateX(x) | 定义 3D 转换,仅使用用于 X轴 的值 |
translateY(y) | 定义 3D 转换,仅使用用于 Y轴 的值 |
translateZ(z) | 定义 3D 转换,仅使用用于 Z轴 的值 |
scale3d(x,y,z) | 定义 3D 缩放转换 |
scaleX3d(x) | 定义 3D 缩放转换,通过给定一个 X轴 的值 |
scaleY3d(y) | 定义 3D 缩放转换,通过给定一个 Y轴 的值 |
scaleZ3d(z) | 定义 3D 缩放转换,通过给定一个 Z轴 的值 |
rotate3d(x,y,z) | 定义 3D 旋转 |
rotateX(x) | 定义 X轴 的 3D 旋转 |
rotateY(y) | 定义 Y轴 的 3D 旋转 |
rotateX(z) | 定义 Z轴 的 3D 旋转 |
perspective(n) | 定义 3D 转换元素的透明视图 |
2.8.3 动画
@keyframes
使用动画之前必须先定义关键帧,一个关键帧表示动画过程中的一个状态
@keyframes 规则用于创建动画,在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐变为新样式的动画效果
属性值:
- animationname:表示当前动画的名称,将作为引用时的唯一标识,因此不能为空
- keyframes-selector:关键帧选择器,即指定当前关键帧要应用到的整个动画过程中的位置,值可以是一个 百分比、from 或 to
- 其中,from 和 0% 效果相同,表示动画的开始,to 和 100% 效果相同,表示动画的结束
- css-style:定义执行到当前关键帧时对应的动画状态,由 CSS 样式定义,不能为空
语法格式:
@keyframes 'animationname' {
keyframes-selector{css-styles;}
}
/* 动画完全透明开始,到完全不透明结束 */
@keyframes 'appear' {
/* 方法一: */
0% { opacity: 0;}
100% { opacity: 1;}
/* 方法二: */
from { opacity: 0;}
to { opacity: 1;}
/* 方法三:实现淡入淡出效果*/
from,to {opacity: 0;} /* 动画开始结束状态为:完全透明 */
20%,80% { opacity: 1;} /* 动画的中间状态为:完全不透明 */
}
animation-name 属性
animation-name 属性 用于定义动画名称,为 @keyframes 动画规定名称。初始值为 none,适用于所有块元素和行内元素
animationname 参数用于规定需要绑定到选择器的 keyframe 的名称,如果值为none,则表示不应用任何动画,通常用于覆盖或者取消动画
语法格式:
animation-name: keyframename | none;
div {
animation-name: header; /* 绑定动画名称 */
}
@keyframes header { /* 定义动画效果 */
from { opacity: 0;}
to { opacity: 1;}
}
animation-duration 属性
animation-duration 用于定义动画完成所需要的时间,以秒(s)或者毫秒(ms)计算,默认值为 0
语法格式:
animation-duration: time;
div {
animation-name: header;
animation-duration: 2s; /* 设置动画时长 */
}
@keyframes header {
from { opacity: 0;}
to { opacity: 1;}
}
animation-timing-function 属性
animation-timing-function 用于规定动画的速度曲线,可以定义使用哪种方式来执行动画效果,默认值为 ease,适用于所有的块元素和行内元素
属性值 | 说明 |
---|---|
linear | 动画从头到尾的速度是相同的 |
ease | 默认。动画慢速开始,逐渐加快,再以慢速结束 |
ease-in | 动画慢速开始 |
ease-out | 动画慢速结束 |
ease-in-out | 的哦动画以慢速开始和结束 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0~1 的数值 |
语法格式:
animation-timing-function: value;
div {
animation-timing-function: ease-in;
}
animation-delay 属性
animation-delay 属性用于定义执行动画效果之前延迟的时间,即动画什么时候开始
语法格式:
animation-delay: time;
div {
animation-delay: 2s; /* 动画延迟 2s 开始 */
}
animation-iteration-count 属性
animation-iteration-count 属性用于定义动画的播放次数。初始值为 1,适用于所有的块元素和行内元素
- 如果属性值为 number,则用哪个与定义动画播放的次数
- 如果属性值是 infinite,则指定动画循环播放
语法格式:
animation-iteration-count: number | infinite;
animation-iteration-count: 2; /* 定义动画播放 2次 */
-webkit-animation-iteration-count: 2; /* Safari 和 Chrome 浏览器兼容代码 */
animation-direction 属性
animation-direction 属性定义当前动画播放的方向,即动画播放完毕后是否逆向交替循环。适用于所有的块元素和行内元素
该属性有两个值,默认值为 normal,表示动画每次都会正常显示。如果属性值为 alternate,则动画会在奇数次数正常播放,而在偶数次数逆向播放
语法格式:
animation-direction: normal | alternate;
div {
animation-direction: alternate; /* 动画会在奇数次数正常播放,偶数次数逆向播放 */
-webkit-animation-direction: alternate; /* Safari 和 Chrome 浏览器兼容代码 */
}
animation 属性
与 transition 属性一样,animation 属性也是一个简写属性,用于在一个属性值中设置 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count 和 animation-direction 六个动画属性
使用 animation 属性时,必须指定 animation-name 和 animation-direction 属性,否则持续的时间为 0,并且永远不会播放动画
语法格式:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
/* 必要属性 */
animation: mymove alternate;
animation: mymove 5s linear 2s 3 normal; /* mymove 动画,时长5秒,均速播放,延迟2秒播放,播放3次,正常显示 */