本文介绍了CSS3在页面多媒体嵌入、过渡效果（包括过渡属性、动画曲线和延迟）、变形效果（平移、旋转、缩放、倾斜及基准点）、动画效果（关键帧、循环播放）以及滤镜技术（模糊、亮度调整等）的应用。还讲解了CSS3精灵技术如何优化图片加载速度。
CSS3高级应用
一、页面中的多媒体嵌入
网页除了可以放置图片和文字，还可以放置音频和视频。
1、视频：
标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示内部的子元素。
(1)视频格式
<video src=“视频文件名” controls muted autoplay loop><p>你的浏览器不支持此视频格式<p></video>
.mp4：mpeg-4(视频标准)
.WebM
.Ogg
(2)属性如下：
- src：视频文件的网址。
- controls：播放器是否显示控制栏。该属性是布尔属性，不用赋值，只要写上属性名，就表示打开。如果不想使用浏览器默认的播放器，而想使用自定义播放器，就不要使用该属性。
- width：视频播放器的宽度，单位像素。
- height：视频播放器的高度，单位像素。
- autoplay：视频是否自动播放，该属性为布尔属性。
- loop：视频是否循环播放，该属性为布尔属性。
- muted：是否默认静音，该属性为布尔属性。
- poster：视频播放器的封面图片的 URL。
- preload：视频播放之前，是否缓冲视频文件。这个属性仅适合没有设置autoplay的情况。它有三个值，分别是none(不缓冲)、metadata(仅仅缓冲视频文件的元数据)、auto(可以缓冲整个文件)。
- playsinline：iPhone 的 Safari 浏览器播放视频时，会自动全屏，该属性可以禁止这种行为。该属性为布尔属性。
- crossorigin：是否采用跨域的方式加载视频。它可以取两个值，分别是anonymous(跨域请求时，不发送用户凭证，主要是 Cookie)，use-credentials(跨域时发送用户凭证)。
2、音频：
标签是一个块级元素，用于放置音频，用法与video标签基本一致。
（1）音频格式
<audio src=“音频文件名” controls muted autoplay loop></audio>
.mp3 : mpeg-3(音频文件标准)
.wav
.ogg
（2）属性如下：
-
src：音频文件网址。
-
autoplay：是否自动播放，布尔属性。
-
loop：是否循环播放，布尔属性。
-
muted：是否静音，布尔属性。
-
controls：是否显示播放工具栏，布尔属性。如果不设置，浏览器不显示播放界面，通常用于背景音乐。
-
crossorigin：是否使用跨域方式请求。
-
preload：音频文件的缓冲设置。
二、CSS3中过渡效果（transition)
从一个样式变化到另一个样式
1、transition-property：指定过渡的属性，取值如下：
none：没有属性取得过渡效果
all : 所有属性都有过渡效果
property：具体属性名获得过渡效果
2、transition-duration：过渡效果所花费的时间，默认值为0
秒：单位是s
毫秒：单位是ms
小练习：
①代码段如下：
<style>
div{
width:400px;
height:200px;
background-color:red;
}
div:hover{
background-color:blue;
transition-property:background-color;/*指定那个属性获得过渡效果。*/
transition-duration: 5s;/*指定过度效果完成所需的时间。*/
}
</style>
<body>
<div></div>
</body>
②过渡效果展示：
3、transition-timing-function：过渡的速度曲线，取值如下：
| 属性值 | 含义 |
|---|---|
| linear： | 以相同的速度从开始到结束。等同于cubic-bezier(0,0,1,1) |
| ease： | 默认值。由慢到快,然后再到慢的效果 |
| ease-in | 由慢开始，逐渐加快.即淡入效果 |
| ease-out： | 由慢结束.即淡出效果 |
| ease-in-out： | 淡入、淡出效果 |
| cubic-bezier(n,n,n,n) | 由函数实现 |
插入一个曲线图便与理解：
小练习：
①代码段展示：
<style>
.demo{
width: 424px;
height:424px;
background: url('../images/cd_img.jpg');
border:5px solid #333;
border-radius: 0px;
}
.demo:hover{
border-radius: 50%;
transition-property: border-radius;
transition-duration: 3s;
transition-timing-function: ease-in-out;
}
</style>
<body>
<div class="demo"></div>
</body>
②过渡效果展示：
4、transition-delay：规定过渡效果何时开始，可以设置 延迟触发时间。默认是 0，鼠标触发就立即开始。
5、综合写法：transition：用于在一个属性中设置四个过渡属性。
transition:要过渡的属性 花费时间 运动曲线 何时开始
①代码块如下：
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
/* transtion 过渡的意思 这句话写到div里面而不是 hover里面
过渡写到本身上，谁做动画，给谁加*/
transition: all 0.6s ease 0s;
}
div:hover { /* 鼠标经过盒子，我们的宽度变为400 */
width: 600px;
height: 300px
}
</style>
<body>
<div></div>
</body>
②效果展示：
三、CSS3中变形效果(transform)
1.平移：本质是重新定义元素的坐标
(1)transform: translate(x-value,y-value); 表示x轴、y轴同时平移
(2)transform: translateX(150px); 表示x轴的平移.等价于transform: translate(150px);
(3)transform: translateY(150px); 表示Y轴平移。
(4)transform:translate(150px);第二个值被省略的话，默认为0。
示例：
①代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子的平移</title>
</head>
<style>
div{
width: 100px;
height: 50px;
background-color: aqua;
color: aliceblue;
}
#div2{
transform: translate(100px,30px);/*盒子2相对于盒子1的相对位移 ,X轴Y轴同时平移*/
/* transform: translateX(100px); 表示X轴的平移*/
/* transform: translateY(30px);表示y轴的平移 */
}
</style>
<body>
<div>盒子1没有平移</div>
<div id="div2">盒子2有平移</div>
</body>
</html>
②页面展示：
2、旋转：可以让元素在一个坐标系统中变形
● transform:rotate(angle);用于指定元素围绕默认基准点（50%，50%）旋转,参数angle表示旋转的角度值,正数表示顺时针旋转,负数表示逆时针旋转。
●transform:rotateX(a)函数用于指定元素围绕X轴旋转。
解释说明：参数a用于定义旋转的角度值，单位为deg,其值可以是正数也可以是负数。如果值为正,元素将围绕X轴顺时针旋转;反之，如果值为负，元素围绕X轴逆时针旋转。
●transform:rotateY(a);
参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕Y轴顺时针旋转;反之,如果值为负，元素围绕Y轴逆时针旋转。
●transform:rotateZ(a);
参数a与rotateX(a)，rotateY(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕Z轴顺时针旋转;反之,如果值为负，元素围绕Z轴逆时针旋转。
●rotate3D ()方法
在三维空间里，除了rotateX()、rotateY()和rotateZ()函数可以让元素在三维空间中旋转之外，还有个rotate3d()函数。
●rotate3d(x,y,z,angle);x、y、z可以取值0或1,当要沿着某一轴转动，就将该轴的值设置为1,否则设置为0。Angle为要旋转的角度。
①代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转</title>
</head>
<style>
div{
width: 200px;
height: 100px;
background-color: aqua;
margin: 100px;
}
#div1:hover{/* 当鼠标悬停时 */
transition: all 1s ease-in-out;
transform: rotate(-90deg);
}
</style>
<body>
<div id="div1">盒子旋转的元素</div>
</body>
</html>
②页面展示：
旋转前：
旋转后：
3、缩放：本质是改变元素的大小。(改变元素宽度和高度的缩放比例)
(1)transform:scale(x-axis,y-axis);参数表示宽度和高度的缩放比例,可以是正数、负数和小数, 若是负数，则先让元素反转，然后进行缩放
transform: scale(2,3); 参数2表示原宽度的2倍(即200%),参数3表示原高度的3倍(即300%)
transform: scale(2);若省略第二个参数,则第二个参数值和第一个参数值相同
(2)transform: scaleX(2);只缩放宽度
(3)transform: scaleY(2);只缩放高度
①代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缩放</title>
<!-- 参数表示宽度和高度的缩放比例，可以是正数，也可以是负数和小数，为负数的话文字进行旋转，在进行缩放。 -->
</head>
<style>
div{
width: 100px;
height: 50px;
background-color: chartreuse;
border:1px solid black;
}
#div2{
margin: 100px;
transform: scale(2,3);/*参数2表示原宽度的2倍，参数三表示原高度的三倍。*/
/* transform:scale(2);若省略第二个参数，则第二个参数和第一个参数值相同，不为默认值0 */
/* transform:scaleX(2); */
/* transform: scaleY(3); */
}
</style>
<body>
<div>盒子1没有缩放</div>
<div id="div2">盒子2 有缩放</div>
</body>
</html>
②页面展示：
4、倾斜：改变元素倾斜的角度
(1)transform:skew(x-angle,y-angle);两个参数分别表示x轴和y轴的倾斜角度。角度的单位是deg, 如果第二个参数省略,默认值为0
(2)transform:skewX(x-angle);沿x轴倾斜
(3)transform:skewY(y-angle);沿y轴倾斜
①代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倾斜</title>
<!-- 改变元素倾斜的角度 -->
</head>
<style>
div{
width:100px ;
height:50px;
background-color: red;
border: 1px solid black;
}
.div2{
margin: 100px;
transform: skew(-30deg ,-10deg);
/* transform: skew(30deg,10deg); */
/* transform: skewX(30deg); */
/* transform: skewY(10deg); */
}
</style>
<body>
<div>盒子1没有倾斜</div>
<div class="div2">盒子2有倾斜</div>
</body>
</html>
②页面展示：
5、中心点：元素变形的基准点,若要改变这个基准点，通过以下属性实现
transform-origin: x-axis y-axis z-axis; 三个参数的默认值为50% 50% 0
x-axis: left center right length %
y-axis: top center bottom lengh %
z-axis: length
①代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基准点的变形</title>
<!-- 基准点默认值为50% 50% 0;也就是说X轴和Y轴的一般，Z轴为0，是个二维空间 -->
</head>
<style>
div{
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px;
}
#div2:hover{
transform-origin:left center 0;/*改变基准点*/
transform:rotate(-90deg);
}
</style>
<body>
<div id="div2">中心点</div>
</body>
</html>
②页面展示：
中心点变形之前：
中心点变形之后：
四、CSS3的动画效果（animation）
1、创建动画：@keyframes
> @keyframes animation-name{
keyframes-selector: {
css-styles
}
}
animationname:表示当前动画的名称，它将作为弓|用时的唯一标识，因此不能为空。
keyframes-selector：关键帧选择器。(可以是百分比、from、to，表示在指定关键帧时动画的位置)
css-styles:定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。
注：from和0%等价，表示动画开始的关键帧
注：to和100%等价,表示动画结束的关键帧
2、应用动画：animation
- animation-name：keyframename| none;（动画名称）
animation-name属性初始值为none,适翻于所有块元素和行内元素keyframename参数用于 规定需要绑定到选择器的keyframe的名称，如果值为none,则表示环应用任何动画,通常用于覆盖或者取消动画。
- animation-timing-function：动画方式(动画完成的速度曲线),可以定义使用哪种方式执行效果。
animation-timing-function包括linear、ease-in、 ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值。
| 属性值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| cubic-bezier（n,n,n,n) | 在cubic-bezier函数中自己的值。可能的值是0到1的数值。 |
- animation-delay：执行动画效果之前延迟的时间(规定动画什么时候开始)
参数time用于定义动画开始前等待的时间，其单位是秒或者毫秒，默认属性值为0。animation-delay属性 适用于所有的块玩素和行内元素。
- animation-iteration-count：动画的播放次数(参数可以是数字和infinite)
animation-iteration-count属性初始值为1,适用于所有的块元素和行内元素。如果属性值为number,则用于定义播放动画的次数;如果是infinite,则指定动画循环播放。
- animation-duration：time;用于定义整个动画效果完成所需要的时间，以秒或毫秒计。
animation-duration属性初始值为0,适翻于所有块元素和行内元素。time参数是以秒(s)或者毫秒(ms)为单位的时间，默认值为0,表示没有任何动画效果。当值为负数时，则被视为0。
animation-direction：normal| alternate;(动画播放的方向)
animation- direction属性初始值为normal, 适用于所有的块元素和行内元素。该属性包括两个值，默认值normal表示动画每次都会正常显示。如果属性值是" alternate",则动画会在奇数次数(1、3、5等等)正常播放，而在偶数次数(2、 4、6等)逆向播放。
- animation: 动画名称 动画方式 循环播放 完成时间; 复合定义(综合写法）
示例1:
①代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
</head>
<style>
img{
width:200px;
animation-name: mymove;
animation-duration: 10s;
}
@keyframes mymove{ /*@keyframes关键帧 mymove动画名称*/
from{transform: translate(0) rotateY(180deg);}
50%{transform: translate(1000px) rotateY(180deg);}
51%{transform: translate(1000px) rotateY(0deg);}
to{transform: translate(0) rotateY(0deg);}
}
</style>
<body>
<img src="../images/people.gif">
</body>
</html>
②页面动画效果：
示例2：
①代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height:150px;
margin:40px;
border-radius: 50%;
background: #F60;
animation-name: mymove; /* 定义动画名称 */
animation-duration: 8s;/* 定义动画时间*/
animation-iteration-count: 2;/* 定义动画次数 */
animation-direction: alternate;/* 定义动画方向 */
}
@keyframes mymove{
from{transform: translate(0) rotate(0deg);} /*rotate(0deg);作用使其效果为3d椭圆*/
to{transform:translate(1000px) rotateZ(1080deg);}
}
</style>
<body>
<div></div>
</body>
</html>
②页面动画效果：
示例3：
①代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
border: 2px solid #000;
position: relative;
transition: all 1s ease 0s;/*设置过渡效果*/
transform-style: preserve-3d;/*保存嵌套元素的3D空间*/
}
img{
position: absolute;
top: 0;
left: 0;
transform: translateZ(100px);
}
.no2{
transform:rotateX(90deg) translateZ(100px);
}
div:hover{
transform: rotateX(-90deg);/*设置旋转角度*/
}
</style>
<body>
<div>
<img class="no1" src="../images/1.png">
<img class="no2" src="../images/2.png">
</div>
</body>
</html>
②动画效果展示：
五、CSS3的滤镜效果(Filters)
1、模糊效果(高斯模糊)：blur(value);参数value表示模糊半径
2、图像的亮度：brightness(value);参数表示图像的亮度。可以是百分比，也可以是正数值 。0%表示全黑图像,100%和1表示原图
3、调整图像对比度：contrast(value);参数表示图像的对比度。可以是百分比，也可以是正数值。 0%表示全黑图像,100%和1表示原图
4、图像阴影：drop-shadow(x,y,r,c);类似于box-shadow属性.参数x和y表示阴影在水平和垂直方向的偏移量。 参数r表示阴影半径,参数c表示阴影颜色
5、将图像转为灰度：grayscale(value);参数可以是百分比和正数。100%表示全部灰度,0%表示不变
6、反转效果：invert(value); 参数是百分比或正数。100%和1表示完全反转,0%表示不变
7、图像透明度：opacity(value);参数是百分比或正数。100%和1表示不变,0%表示完全透明
8、棕褐色效果：sepia(value);参数是百分比或正数.100%和表示深褐色。0%表示不变
9、饱和度：saturate(value); 0%表示不饱和
①代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
img{
/*-webkit-filter: blur(5px);webkit表示浏览器内核效果（wekit表示谷歌内核）*/
/* filter: blur(2px);参数表示模糊半径，值越大越模糊*/
filter: brightness(120%);/*参数表示图像的亮度,值越大越亮*/
width: 500px;
height: 300px;
}
/* 对比度 */
#t1{
width: 500px;
height: 300px;
filter: contrast(150%);
}
/* 阴影效果，前两个值表示水平和垂直方向的偏移量，第三个值表示阴影半径，第四个值表示阴影颜色 */
#t2{
width: 500px;
height:300px;
border-radius: 50%;
filter: drop-shadow(4px 4px 10px orange );
}
/* 灰度效果 */
#t3{
width: 500px;
height: 300px;
filter: grayscale(150%);
}
/* 反转效果，1和100%表示完全反转，0%表示不变 */
#t4{
filter: invert(100%);
}
/* 透明度,值越小越透明，默认值1和100%为完全不透明，就是不变 */
#t5{
filter: opacity(40%);
}
/* 棕褐色效果，百分比越大，棕褐色效果越明显 */
#t6{
filter: sepia(80%);
}
/* 图片饱和度，0%表示不饱和*/
#t7{
filter: saturate(80%);
}
</style>
<body>
<img src="../images/3.jpg">
<img src="../images/4.png" id="t1">
<img src="../images/5.png" id="t2">
<img src="../images/6.png" id="t3">
<img src="../images/7.png" id="t4">
<img src="../images/8.png" id="t5">
<img src="../images/9.png" id="t6">
<img src="../images/11.png" id="t7">
</body>
</html>
②页面效果展示：
六、CSS3精灵技术（sprite）
小知识：CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以，访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。
所以，CSS Sprites技术加速的关键，并不是降低质量，而是减少个次数，当然随之而来的增加内存消耗，CSS Sprites图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。
CSS Sprites的使用：
- background-image、
- background-repeat
repeat控制的平铺规则有：
| 属性值 | 解释 |
|---|---|
| repeat-x | 横向平铺； |
| repeat-y | 纵向平铺； |
| repeat | 横向平铺和纵向平铺（默认值）； |
| no-repeat | 不平铺；（也就是说图片只出现一次） |
| round | 背景图像自动缩放直到适应且填充满整个容器或某个方向。（CSS3） |
| space | 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3） |
- background-position属性进行背景定位，
其中最关键的是使用background-position 属性精确地定位,用来设置背景图像起始位置的CSS样式属性，背景图像如果要重复，将从这一点开始。
制作精灵图遵循原则:
- 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
- 精灵图的宽度取决于最宽的那个背景
- 可以横向摆放也可以纵向
示例：
#ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
#ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
#ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
.nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
当然也有简写方法：
#ico1 {width:容器宽度;height:容器高度;background:url(/整图地址) no-repeat X坐标 Y坐标;}
其中，X坐标和Y坐标表示原图相对于ico1框左上角点的偏移量，即 坐标 0 0表示背景图和ico1框的左上角点重合
例如：背景图像是图片"bg_sprite.png"
代码：
ico {
width: 16px;
height:16px;
background: url("bg_sprite.png") no-repeat 0 -234px;
}
效果：
扫一扫
1939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
