一、转换
1、属性：transform
取值：none/transform-function(转换函数)
注意：如果要实现多个转换函数的话，可以用空格分开若干transform-function
2、转换的原点
默认情况，原点在元素的中心处，width*50%，height*50%
更换原点-属性：transform-origin：数值/百分比/关键字(top/bottom/left/right)
取值：按照当前元素的左上点为(0,0)
一个值：所有轴的位置
两个值：第一个值表示x轴上的值，第二个表示y轴
三个值：x,y,z
转换主要分为两类：2D转换和3D转换
（一）2D转换
1、位移：位置移动
函数：translate()
取值：数值/百分比(可为负)
一个值：x轴
两个值：x轴,y轴
单向位移函数：translateX(),translateY()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-2D变换之位移</title> 6 <link rel="stylesheet" href="demo05.css"> 7 </head> 8 <body> 9 <div id="d1"></div> 10 <div id="d2"></div> 11 </body> 12 </html> 1 @charset "utf-8"; 2 3 div{ 4 width: 200px; 5 height: 200px; 6 position: absolute; 7 top: 100px; 8 left: 200px; 9 } 10 #d1{ 11 border: 1px dotted #000; 12 } 13 #d2{ 14 border: 1px solid #000; 15 background-color: #f00; 16 opacity: 0.5; 17 /*2D变换之位移*/ 18 transform: translate(50px,50px); 19 }2、缩放：改变元素尺寸
函数：scale()
取值：
一个值：x轴和y轴同样的缩放比例
两个值：分别表示x轴和y轴的缩放比例
可取值：
默认值为 1
放大：大于1的数值，可以取小数
缩小：0-1的数值
单向缩放函数：scaleX(x),scaleY(y)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-2D变换之缩放</title> 6 <link rel="stylesheet" href="demo06.css"> 7 </head> 8 <body> 9 <div id="d1"></div> 10 <div id="d2"></div> 11 </body> 12 </html> @charset "utf-8"; div{ width: 200px; height: 200px; position: absolute; top: 100px; left: 200px; } #d1{ border: 1px dotted #000; } #d2{ border: 1px solid #000; background-color: #f00; opacity: 0.5; /*2D变换之缩放*/ transform: scale(0.8,0.5); /*缩小*/ /*transform: scale(1.2); 放大*/ }3、旋转：围绕着一个圆心(转换原点)发生旋转的操作
函数：rotate(nxdeg)
n：符号，可正(顺时针)可负(逆时针)
x：旋转角度的数值
deg:角度单位
注意：旋转是连同坐标轴一起转
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-2D变换之旋转</title> 6 <link rel="stylesheet" href="demo07.css"> 7 </head> 8 <body> 9 <div id="d1"></div> 10 <div id="d2">Web前端</div> 11 </body> 12 </html>
1 @charset "utf-8"; 2 3 div{ 4 width: 200px; 5 height: 200px; 6 position: absolute; 7 top: 100px; 8 left: 200px; 9 } 10 #d1{ 11 border: 1px dotted #000; 12 } 13 #d2{ 14 border: 1px solid #000; 15 background-color: #f00; 16 opacity: 0.5; 17 /*定义新原点*/ 18 transform-origin: 100% 100%; 19 /*2D变换之旋转*/ 20 transform: rotate(30deg); 21 }
4、倾斜：让元素围绕着x轴或y轴，按照一定的角度产生倾斜效果
函数：skew(nxdeg)
单向缩放函数：skewX(),skewY()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-2D变换之倾斜</title> 6 <link rel="stylesheet" href="demo08.css"> 7 </head> 8 <body> 9 <div id="d1"></div> 10 <div id="d2">Web前端</div> 11 </body> 12 </html> 1 @charset "utf-8"; 2 3 div{ 4 width: 200px; 5 height: 200px; 6 position: absolute; 7 top: 100px; 8 left: 200px; 9 } 10 #d1{ 11 border: 1px dotted #000; 12 } 13 #d2{ 14 border: 1px solid #000; 15 background-color: #f00; 16 opacity: 0.5; 17 /*2D变换之倾斜*/ 18 transform: skew(45deg,15deg); 19 }（二）3D转换
元素可以沿着z轴，发生各种转换的效果
1、属性
perspective：模拟人眼到3D视图的距离，取值为数值,以px为单位
意义：
1、定义距离
2、标识元素可以完成3D转换
注意：该属性要设置在父元素上。即设置完成后，该元素的子元素能够发生3D转换，自身元素是不可以的。
浏览器兼容性：
-webkit-perspective
-moz-perspective
-o-perspective
2、3D - 位移
函数：translateZ(z),translate3D(x,y,z)
3、3D - 旋转
函数：
rotateX(deg)
rotateY(deg)
rotateZ(deg)
rotate3D(x,y,z,deg)
x,y,z取值为0和1,0表示该轴不选择，1表示该轴按照deg的角度进行旋转
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-3D变换之旋转</title> 6 <link rel="stylesheet" href="demo09.css"> 7 </head> 8 <body> 9 <div id="parent"> 10 <div id="son">Better late than never.</div> 11 </div> 12 </body> 13 </html>
1 @charset "utf-8"; 2 3 #parent{ 4 width: 300px; 5 height: 300px; 6 border: 1px solid #ddd; 7 padding: 10px; 8 margin: 80px 0 0 150px; 9 /*设置子级元素，允许发生3D转换*/ 10 perspective: 100px; 11 -webkit-perspective: 100px; 12 } 13 #son{ 14 text-align: center; 15 width: 200px; 16 height: 200px; 17 line-height: 200px; 18 margin: auto; 19 border: 1px solid #000; 20 background-color: #ddd; 21 margin-top: 50px; 22 /*3D旋转*/ 23 transform: rotateX(45deg); /*x轴旋转*/ 24 /*transform: rotateY(30deg);*/ /*y轴旋转*/ 25 /*transform: rotateZ(60deg);*/ /*Z轴旋转*/ 26 transform: rotate3d(1,1,1,30deg); /*整体旋转*/ 27 }
二、过渡：元素的一个状态到另一个状态的平缓过渡
1、过渡相关属性(要素)
a、过渡属性：transition-property
能够实现过渡效果的CSS属性:
颜色：文本颜色，背景颜色
取值为数值：宽度、高度、字体大小
转换属性：transform
渐变属性：background:linear-gradient ....
visibility:
阴影：
透明度：
b、过渡时间：transition-duration
整个过渡的效果将在多长时间内完成，以秒(s)或毫秒(ms)作为单位
注意：默认值为0，整个过渡中，必须要设置transition-duration属性，否则没有过渡效果
c、过渡时间曲线函数：transition-timing-function
取值：
ease：默认值，慢速开始，快速变快，慢速结束
linear：匀速
ease-in：慢速开始，加速效果
ease-out：快速开始，减速效果
ease-in-out：慢速开始和结束，中间先加速再减速
d、过度的延迟：transition-delay
过渡效果什么时候开始，以秒(s)或毫秒(ms)作为单位
e、过渡的综合属性：
transition：property duration timing-function delay
将以上四个过渡属性放在一起，后面两个可以省略
2、触发过渡效果
a、用户的行为(点击、悬浮)
b、:hover, :active ...
3、过渡属性定义在什么地方
div{
width: 100px;
}
div:hover{
width: 300px;
}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>过渡</title> 6 <style> 7 #d1{ 8 width: 100px; 9 height: 30px; 10 background-color: #bfb; 11 /*定义过渡效果*/ 12 /*在此处定义过渡效果，恢复时仍然有效果*/ 13 /*transition-property: width; 14 transition-duration: 1s; 15 transition-timing-function: linear; 16 transition-delay: 100ms;*/ 17 } 18 #d1:hover{ 19 width: 300px; 20 height: 30px; 21 background: #bfb; 22 /*定义过渡效果*/ 23 transition: width 1s ease-in 100ms; 24 } 25 img{ 26 /*若将过渡效果定义在此处，则恢复时依然能看到效果 */ 27 } 28 img:hover{ 29 transform: translate(200px) rotate(720deg); 30 transition: transform 1s linear 100ms; 31 } 32 </style> 33 </head> 34 <body> 35 <div id="d1"></div> 36 <img src="Images/star.jpg"> 37 </body> 38 </html>过渡+3D旋转效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡+3D旋转</title> <style> #parent{ width: 200px; height: 200px; padding: 50px; border: 1px solid #ddd; perspective: 100px; margin: 10px auto; } #son{ width: 100px; height: 100px; background-color: #ccc; border: 1px solid #ddd; margin: 30px auto; transition: transform 5s linear 2s; } #son:hover{ transform: rotate3d(1,1,1,360deg); } </style> </head> <body> <div id="parent"> <div id="son">360°旋转</div> </div> </body> </html>三、动画
1、在多个状态之中，做平缓过渡的效果
2、浏览器兼容性
-webkit- 谷歌
-moz- 火狐
-o- 欧鹏
3、创建使用动画步骤
A、声明动画
a、起名
b、使用 @keyframes 声明动画的关键帧
关键帧：特殊时间点上的状态
B、使用动画
属性：animation
通过以上属性调用动画的名称
设置相关操作
4、声明动画
通过 @keyframe 声明动画
语法：@keyframes 动画名称
{
from | 0%{
//动画开始的状态，CSS属性
width:0px;
}
[percent{
//动画的中间状态
}]
10%{
width:10px;
}
20%{
width:20%;
}
to | 100%{
//动画结束的状态
width:100px;
}
}
5、调用动画
属性
a、animation-name：动画名称
b、animation-duration：动画完成一个周期所需要的时间(s|ms为单位)
c、animation-timing-function：动画执行过程中的时间速度曲线函数
取值：ease,linear,ease-in,ease-out,ease-in-out
d、animation-delay：播放动画之前的延迟
e、animation-iteration-count：动画播放次数
取值：
定数值：播放指定次数
infinite：无限次
f、animation-direction：动画播放方向
取值：
normal：正常，从头到尾
alternate：轮播，在奇数次上正向播放，在偶数次上逆向播放
g、animation：动画的综合属性
animation：name duration timing-function delay iteration-count direction;(后四个可省略)
h、animation-fill-mode：动画播放前后元素的状态
取值：
none：默认，不改变默认行为
forwards：动画完成后，保持在最后一个帧的状态
backwards：动画显示之前，保持在第一个关键帧的状态
both：结合了forwards和backwards的状态
i、animation-play-state：设置动画播放状态
取值：
paused：暂停
running：播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画练习 - 钟表</title> <style> #circle{ width: 500px; height: 500px; border: 3px solid #00f; border-radius: 50%; margin: auto; } #hour{ float: left; height: 125px; border: 4px solid #bbf; position: relative; top: 125px; left: 250px; transform-origin: 0 125px; animation: hours 3600s linear 0s infinite; } #second{ float: left; height: 200px; border: 2px solid #00f; position: relative; top: 54px; left: 244px; transform-origin: 0 200px; animation: seconds 60s linear 0s infinite; } /*声明动画*/ @keyframes hours{ from{ transform: rotate(0deg); /*transform-origin: 0 125px;*/ } 25%{ transform: rotate(90deg); } 50%{ transform: rotate(180deg); } 75%{ transform: rotate(270deg); } to{ transform: rotate(360deg); } } @keyframes seconds{ from{ transform: rotate(0deg); /*transform-origin: 0 200px;*/ } 25%{ transform: rotate(90deg); } 50%{ transform: rotate(180deg); } 75%{ transform: rotate(270deg); } to{ transform: rotate(360deg); } } </style> </head> <body> <div id="circle"> <b id="hour"></b> <b id="second"></b> </div> </body> </html>
