目录
一、CSS3过渡（transition）（重点）
二、CSS3过渡练习——进度条案例
三、CSS3 2D转换(translate、rotate、scale、转换中心点transform-origin)
四、CSS3 动画
五、CSS3动画常见属性
五、热点图案例（动画）
六、速度曲线之steps步长（案例——奔跑的熊大）
七、CSS3 3D转换（3D 位移：translate3d(x,y,z)、3D 旋转：rotate3d(x,y,z)、透视：perspective、3D呈现 transform-style）
八、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
八、浏览器私有前缀
一、CSS3过渡（transition）（重点）
过渡动画：是从一个状态 渐渐的过渡到另外一个状态
可以让页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本）但是不影响页面布局
经常和 :hover 一起搭配使用
语法：
transition : 要过渡的属性 花费时间 运动曲线 何时开始 ;
1. 属性：想要变化的 css 属性，宽度高度 背景颜色 内外边距都可以。如果想要所有属性都变化过渡，写一个 all 就可以。
2. 花费时间： 单位是 秒（必须写单位）比如 0.5s
3. 运动曲线：默认是 ease (可以省略)
4. 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
如果想写多个属性，利用逗号, 进行分割，如 transition: width 1s, height 1s;
如果想要多个属性都变化，属性写 all 就可以了 如 transition: all 1s;
记住过渡的使用口诀：谁做过渡给谁加
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 变化的属性 花费时间 运动曲线 何时开始; */
transition: width 1s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
二、CSS3过渡练习——进度条案例
设置当鼠标移到外部盒子初时，进度条加满
<!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>
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
transition: width 1s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>三、CSS3 2D转换(translate、rotate、scale、转换中心点transform-origin)
转换 (transform) 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
转换（transform）可以简单理解为变形
移动：translate
可以该变元素在页面中的位置，类似定位。
移动盒子的位置： 定位 盒子的外边距 2d转换移动
语法：
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
重点：
定义2D 转换中的移动，沿着 X 和 Y轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate 中的百分比单位是相对于自身元素的 translate:(50%,50%);
对行内标签没有效果
让一个盒子水平垂直居中
不使用之前的margin-top 、marfin-left 因为其需要写固定值，使用translate:(50%,50%);更好，下面是让盒子水平垂直居中的例子：
<style>
/* 移动盒子的位置： 定位 盒子的外边距 2d转换移动 */
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
/* margin-top: -100px;
margin-left: -100px; */
/* translate(-50%, -50%)盒子往上走自己高度的一半 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body> <style>
/* 移动盒子的位置： 定位 盒子的外边距 2d转换移动 */
.one {
width: 200px;
height: 200px;
background-color: pink;
/* x就是x 轴上移动位置，y 就是 y轴上移动位置 ，中间用逗号隔开*/
transform: translate(50%, 100px);
/* 1. 只移动 x坐标 */
/* transform: translate(100px,0); */
/* transform: translateX(100px); */
}
.two {
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>旋转：rotate
2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转。
语法：
transform: rotate(度数)
重点：
rotate 里面跟度数，单位是 deg 比如 rotate(45deg)
角度为正时，顺时针；负时，为逆时针
默认旋转的中心点是元素的中心点
旋转案例——三角形
之前使用图标字体来设置三角形，现在可以通过为div::after 设置一个小盒子，只保留需要的边框并进行旋转，即可得到三角形，还可以在鼠标移到div 时，进行旋转设置。代码如下：
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
position: absolute;
top: 8px;
right: 15px;
content: '';
width: 10px;
height: 10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
transition: all .1s;
}
/* 鼠标经过div 里面的三角时旋转 */
div:hover::after {
/* 之前已经旋转了45度，所以应该在45度的基础上再旋转180度，即45 +180=225deg */
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>设置转换中心点 transform-origin
语法：
transform-origin: x y;
重点：
注意后面的参数 x 和 y 用空格隔开
x y 默认转换的中心点是元素的中心点（50% 50%）
还可以给x y 设置 像素 或者 方位名词 （top bottom left right center）
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
transition: all 1s;
/* 可以跟方位名词 ，默认的是50% 50%,等价于 center center*/
/* transform-origin: left bottom; */
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>案例：旋转案例
<style>
div {
/* 一般看不到before伪元素，故溢出设置隐藏 */
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 0 auto;
}
div::before {
display: block;
content: '黑马';
width: 100%;
height: 100%;
background-color: hotpink;
transform: rotate(-180deg);
transform-origin: left bottom;
transition: all .5s;
}
/* 鼠标经过div 里面的before复原 */
div:hover::before {
transform: rotate(0);
}
</style>
</head>
<body>
<div></div>
</body>缩放：scale
只要给元素添加了这个属性就能控制它放大还是缩小。
语法：
transform: scale(x, y);
注意：
注意其中的x 和 y 用逗号分隔
里面写的数字不跟单位，就是倍数的意思
transform: scale(1, 1)：宽和高都放大一倍，相对于没有放大
transform: scale(2, 2)：宽和高都放大了 2倍
transform: scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2, 2)
transform: scale(0.5, 0.5)：缩小 ，小于1就是缩小
scale 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其它盒子
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
div:hover {
/* 等比例缩放 同时修改宽度和高度，有简单的写法，
以下是宽度修改了0.5倍，高度默认和第一个参数一样 */
transform: scale(0.5);
transform-origin: left top;
}
</style>
</head>
<body>
<div></div>
</body>图片放大案例
<style>
div {
/* 使图片放大时超过的内容不显示 */
overflow: hidden;
float: left;
margin: 10px;
}
div img {
/* 谁做过渡给谁加 */
transition: all .4s;
}
div img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div><a href="#"><img src="./media/scale.jpg" alt=""></a></div>
<div><a href="#"><img src="./media/scale.jpg" alt=""></a></div>
<div><a href="#"><img src="./media/scale.jpg" alt=""></a></div>
</body>分页按钮案例
<style>
ul li {
float: left;
width: 30px;
height: 30px;
border: 1px solid pink;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transition: all .3s;
}
ul li:hover {
transform: scale(1.3);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>2D转换综合写法
注意：
1. 同时使用多个转换，其格式为 ：transform: translate() rotate() scale( ) …等，
2. 其顺序会影响转换的效果。（先旋转会改变坐标轴的方向）
3. 当我们同时有位移 和其他属性的时候，记得位移放到最前。
2D转换小结
四、CSS3 动画
动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
动画的基本使用
制作动画分为两步：
1. 先定义动画
用 keyframes 定义动画（类似定义类选择器）
2. 再使用（调用）动画
<style>
/* 想页面一打开，一个盒子就从左边走到右边 */
/* 定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translate(0px);
}
/* 结束状态 */
100% {
transform: translate(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 调用动画 */
animation-name: move;
/* 动画持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
注意：动画序列里面的百分比要为整数。
里面的百分比就是总的持续时间 （下面案例是8s）的划分
<style>
/* 定义动画 */
/* 可以做多个状态的变化 keyframe关键帧 */
@keyframes move {
0% {
transform: translate(0,0);
}
25% {
transform: translate(1000px,0);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0,0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 调用动画 */
animation-name: move;
/* 动画持续时间 */
animation-duration: 8s;
}
</style>
</head>
<body>
<div></div>
</body>五、CSS3动画常见属性
动画的完成时间、速度曲线、以及何时开始的属性与过渡相同。
<style>
/* 想页面一打开，一个盒子就从左边走到右边 */
/* 定义动画 */
@keyframes move {
0% {
transform: translate(0,0);
}
100% {
transform: translate(1000px,0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 动画名称 */
animation-name: move;
/* 动画持续时间 */
animation-duration: 2s;
/* 运动曲线 */
animation-timing-function: ease;
/* 动画何时开始 */
animation-delay: 1s;
/* 重复次数 iteration 重复 count 次数 infinite 无限的 */
animation-iteration-count: 2;
/* 是否反方向播放 默认的是normal 如果要反方向就用 alternate */
animation-direction: normal;
/* 动画结束后的状态 保持forwards 回到起始状态backwards */
animation-fill-mode: forwards;
}
div:hover {
/* 鼠标经过div 让这个div停止动画，鼠标离开就继续动画 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>动画简写属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
简写属性里面不包含 animation-play-state
暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来：animation-direction: alternate;
盒子动画结束后，停在结束位置：animation-fill-mode: forwards
五、热点图案例（动画）
<style>
body {
background-color: #333;
}
.map {
position: relative;
width: 747px;
height: 617px;
background: url(./media/map.png) no-repeat;
margin: 0 auto;
}
.city {
position: absolute;
top: 227px;
right: 193px;
}
.tb {
top: 498px;
right: 80px;
}
.dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.city div[class^="pulse"] {
/* 保证小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: pulse 1.2s linear infinite;
}
/* 注意选择器权重问题，之前使用的简写形式，默认animation-delay为0,
.city div[class^="pulse"]权重为21，而如果只写.pulse2权重为10不执行
*/
.city div.pulse2 {
animation-delay: 0.4s;
}
.city div.pulse3 {
animation-delay: 0.8s;
}
@keyframes pulse {
0% { }
70% {
/* 使用高度宽度变大盒子，而不使用scale的原因是：scale缩放时，
同时也会将盒子的阴影放大，会导致特别大，效果不好看 故不使用transform: scale(5);*/
width: 40px;
height: 40px;
/* opacity 不透明度，从0（完全透明）到 1（完全不透明） */
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city tb">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>六、速度曲线之steps步长（案例——奔跑的熊大）
速度曲线
<style>
div {
overflow: hidden;
font-size: 20px;
width: 0;
height: 30px;
background-color: pink;
/* 让文字强制一行显示 */
white-space: nowrap;
/* steps 就是分几步来完成动画 有了steps 就不要再写 ease 或者 linear了 */
animation: w 4s steps(10) forwards;
}
@keyframes w {
0% {}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div>世纪佳缘我在这里等你</div>
</body>案例：奔跑的熊大
元素可以添加多个动画，用逗号分隔
<style>
body {
background-color: pink;
}
div {
position: absolute;
width: 200px;
height: 100px;
background: url(./media/bear.png);
/* 元素可以添加多个动画，用逗号分隔 */
animation: bear 1s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translate(-50%);
}
}
</style>
</head>
<body>
<div></div>
</body>七、CSS3 3D转换（3D 位移：translate3d(x,y,z)、3D 旋转：rotate3d(x,y,z)、透视：perspective、3D呈现 transform-style）
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
x 轴：水平向右 注意：x右边是正值，左边是负值
y 轴：垂直向下 注意：y下面是正值，上面是负值
z 轴：垂直屏幕 注意：往外面是正值，往里面是负值
3D转换主要学习工作中最常用的3D位移 和 3D旋转
主要知识点
3D 位移：translate3d(x,y,z)
3D 旋转：rotate3d(x,y,z)
透视：perspective
3D呈现 transform-style
3D 位移：translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z 轴方向。
transform: translateX( 100px): 仅仅是在X轴上移动
transform: translateY( 100px): 仅仅是在Y轴上移动
transform: translateZ( 100px): 仅仅是在Z轴上移动（注意：translateZ一般用px单位）
transform: translate3d( x,y,z): 其中x、y、z分别指要移动的轴的方向的距离
注意，xyz是不能省略的，如果没有就写0.
透视：perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的
如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素
透视写在被观察元素的父盒子上面的
3D 旋转 rotate3d
3D 旋转指可以让元素在三维平面内沿着 x轴、y轴、z轴或者自定义轴进行旋转。
语法：
transform: rotateX(45deg): 沿着x 轴正方向旋转45度
transform: rotateY(45deg): 沿着y 轴正方向旋转45度
transform: rotateZ(45deg): 沿着z 轴正方向旋转45度
transform: rotate3d(x,y,x,deg): 沿着自定义轴旋转旋转，deg为角度（了解即可）
对于旋转的方向判断 需要先学习一个左手准则。
左手准则：
左手的手拇指指向x 轴正方向
其余手指的弯曲方向就是该元素沿着 x轴旋转的方向（正值）
同理 y、z旋转方向也使用左手准则
3D呈现 transform-style
控制子元素是否开启三维立体环境
transform-style: flat 子元素不开启3d 立体空间 默认的
transform-style: preserve-3d 子元素开启3d 立体空间
代码要写给父级，但影响的是子盒子
这个属性很重要，后面必用
<style>
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
perspective: 500px;
/* 让子元素保持3d 立体空间环境 */
transform-style: preserve-3d;
transition: all 2s;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>八、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
两面翻转的盒子
<style>
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
perspective: 500px;
/* 让背面的紫色盒子保持3d 立体空间环境 */
transform-style: preserve-3d;
transition: all 2s;
}
.front,
.back {
/* 因为两个盒子是叠在一起的，所以要为其加定位 */
position: absolute;
width: 100%;
height: 100%;
line-height: 300px;
text-align: center;
font-size: 30px;
color: #fff;
border-radius: 50%;
}
.front {
/* 让粉色盒子叠在紫色的上面 */
transform: translateZ(1px);
background-color: pink;
}
.back {
background-color: purple;
/* 像手机一样 背靠背旋转让紫色盒子 */
transform: rotateY(180deg);
}
.box:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">黑马程序猿</div>
<div class="back">pink老师这里等你</div>
</div>
</body>3D导航栏案例
<style>
* {
padding: 0;
margin: 0;
}
ul {
margin: 100px;
}
li {
float: left;
margin: 0 10px;
list-style: none;
width: 120px;
height: 35px;
/* 注意透视给box的父盒子li加，因为当鼠标移动到box上时，box也会翻转
box需要透视，因此要给其父元素li添加 */
perspective: 200px;
}
li .box{
position: relative;
width: 100%;
height: 100%;
line-height: 35px;
font-size: 14px;
text-align: center;
transform-style: preserve-3d;
transition: all 1s;
}
.front,
.bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.front {
/* 移动粉色盒子，因为旋转默认按照中心点旋转 */
transform: translateZ(17.5px);
background-color: pink;
}
.bottom {
background-color: purple;
/* 这个 x轴一定是负值，如果有移动或者其他样式，必须先写移动*/
transform:translate(0,17.5px) rotateX(-90deg);
color: #fff;
}
.box:hover {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">黑马程序猿</div>
<div class="bottom">pink老师这里等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑马程序猿</div>
<div class="bottom">pink老师这里等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑马程序猿</div>
<div class="bottom">pink老师这里等你</div>
</div>
</li>
</ul>
</body>旋转木马案例
<style>
@keyframes r {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
body {
/* 因为要给section 加动画，需要透视效果，所以给section的父盒子加透视 */
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
/* 添加动画效果 */
animation: r 4s linear infinite;
background: url(./media/pig.jpg) no-repeat;
}
/* 鼠标放上去停止动画 */
section:hover {
animation-play-state: paused;
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./media/dog.jpg) no-repeat;
}
section .one {
transform: translateZ(300px);
}
section .two {
/* 先旋转再移动 */
transform: rotateY(60deg) translateZ(300px) ;
}
section .three {
transform: rotateY(120deg) translateZ(300px) ;
}
section .four {
transform: rotateY(180deg) translateZ(300px);
}
section .five {
transform: rotateY(240deg) translateZ(300px);
}
section .six {
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</section>
</body><!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>
<style>
@keyframes r {
0% {}
100% {
transform: rotateY(360deg);
}
}
body {
/* 因为要给section 加动画，需要透视效果，所以给section的父盒子加透视 */
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
animation: r 4s infinite;
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./media/dog.jpg) no-repeat;
}
section .one {
transform: translateZ(300px);
}
section .two {
transform: translate3d(225px,0,150px) rotateY(60deg);
}
section .three {
transform: translate3d(225px,0,-150px) rotateY(-60deg);
}
section .four {
transform: translateZ(-300px);
}
section .five {
transform: translate3d(-225px,0,-150px) rotateY(60deg);
}
section .six {
transform: translate3d(-225px,0,150px) rotateY(-60deg);
}
</style>
</head>
<body>
<section>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</section>
</body>
</html>八、浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。
