CSS3动画:
1、旋转 rotate(n)
旋转函数rotate()通过指定的角度参数使元素相对原点进行旋转;
n为参数,用于设置旋转的角度,如果为正,元素相对原点中心顺时针旋转;如果为负,逆时针旋转。
例:
CSS部分中的“.wrapper div”展示的效果:(n为参数,用于设置旋转的角度,如果为负,元素相对原点中心逆时针旋转;)
CSS部分中的“.wrapper span”展示的效果:(n为参数,用于设置旋转的角度,如果为正,元素相对原点中心顺时针旋转;)
2、扭曲skew()
定义:元素倾斜显示,将对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
3种使用情况:
- skew(x,y)元素同时在水平方向和垂直方向扭曲;
- skewX(x)元素仅在水平方向扭曲;
- skewY(y)元素仅在垂直方向扭曲;
例:
HTML部分:
<div class="wrapper">
<div><span>我不想旋转(^_^)</span></div>
</div>
CSS部分:
.wrapper {
margin: 100px auto;
width: 300px;
height: 200px;
border: 2px dotted blue;
}
.wrapper div{
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background: green;
color: #fff;
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
.wrapper span {
display:block;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
3、缩放scale()
定义:让元素根据中心原点对对象进行缩放。
3种使用情况:
- scale(x,y) 使元素水平方向和垂直方向同时缩放;
- scaleX(x) 元素仅水平方向缩放;
- scaleY(y) 元素仅垂直方向缩放;
注意:
scale()的取值默认为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于等于1.01的值,作用让元素放大。
例:
HTML部分:
<div class="wrapper">
<div>我将缩小0.8</div>
</div>
CSS部分:
.wrapper {
width: 200px;
height: 200px;
border:2px dashed red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
background: orange;
text-align: center;
color: #fff;
}
.wrapper div:hover {
opacity:0.5;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
Transform:属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
4、位移translate
定义:元素向指定的方向移动;
三种情况:
- translate(x,y)水平方向和垂直方向同时移动;
- translateX(x)仅水平方向移动;
- translateY(y)仅垂直方向移动;
例:
HTML部分:
<div class="wrapper">
我不知道我的宽度和高是多少,我要实现水平垂直居中
</div>
CSS部分:
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
5、矩阵 matrix()
语法:matrix(a,b,c,d,e,f);
参数说明: a 表示水平伸缩;b表示垂直扭曲;c表示水平扭曲;d表示垂直伸缩;e表示水平位移;f表示垂直位移;
SO……matrix(scaleX(x),skewY(y),skewX(x),scaleY(y),translateX(x),translateY(y));
例:
HTML部分:
<div class="wrapper">
<div></div>
</div>
CSS部分:
.wrapper {
width: 300px;
height: 200px;
border: 2px dotted red;
margin: 40px auto;
}
.wrapper div {
width:300px;
height: 200px;
background: orange;
-webkit-transform: matrix(1,0,0,1,50,50);
-moz-transform:matrix(1,0,0,1,50,50);
transform: matrix(1,0,0,1,50,50);
}
6、原点 transform-origin
定义:默认的元素的中心点居于元素x轴和y轴的50%处;transform-origin的作用在于可以改变原点位置,是元素原点不在中心位置。
取值:
关键词 | 百分比 |
|
|
top=top center=center top | 50% 0 |
right=right center=center right | 100%或(100% 50%) |
Bottom=bottom center=center bottom | 50% 100% |
left=left center=center left | 0或(0 50%) |
center = center center | 50%或(50% 50%) |
top left=left top | 0 0 |
right top=top right | 100% 0 |
bottom right=right bottom | 100% 100% |
bottom left=left bottom | 0 100% |
例:
<div class="wrapper">
<div>原点在默认位置处</div>
</div>
<div class="wrapper transform-origin">
<div>原点重置到左上角</div>
</div>
CSS部分:
.wrapper {
width: 300px;
height: 300px;
float: left;
margin: 100px;
border: 2px dotted red;
line-height: 300px;
text-align: center;
}
.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}
7、动画过渡 transition
transition是一个复合属性,包含以下几个子属性:
- transition-property:指定过渡或动态模拟的CSS属性;
- transition-duration:指定过渡完成所需的时间;
- transition-timing-function:指定过渡函数;
- transition-delay:指定开始出现的延迟时间;
1)transition-property
具有过渡动画的CSS属性有:
注意:当”transition-property”的属性值为all时,表示的是所有初始状态设置了样式的属性;
2)transition-duration
该属性主要用于设置一个属性过渡到另一个属性所需的时间,即持续时间;
3)transition-timing-function
即“缓冲函数”,指 ,包括以下几种:
4)transition-delay
设置一个动画开始执行的时间;
综上,transition的语法:
transition:transition-property,transition-duration,transition-timing-function,transition-delay;
例:
HTML部分:
<div></div>
CSS部分:
div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
-webkit-transition-property: width;
transition-property: width;
-webkit-transition-duration:.5s;
transition-duration:.5s;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-delay: .18s;
transition-delay:.18s;
/*-webkit-transition :width 0.5s ease-in 0.18s;
transition:width 0.5s ease-in 0.18s; */
}
div:hover {
width: 400px;
}
transition:all(所有属性) 5s(过度的时间)ease过度属性 .2s延迟的时间