一、过渡transition
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值
transition 具体的属性:
-
transition-property:参与过渡的属性/all所有属性 (默认值为all)
-
transition-duration:过渡的持续时间(单位为s/ms)
-
transition-delay:延迟过渡的时间(单位为s/ms)
-
transition-timing-function:过渡的动画类型(如下图)
简写:transition:all/具体属性 运动时间s/ms 延迟时间s/ms 动画类型,.....
(如果过渡的属性不一样,但是过渡效果都一样时,则可直接用all ;如属性不一样且效果要求也不一样,则属性间用逗号隔开)
<div class="box"></div>
.box {
width: 160px;
height: 160px;
background-color: #ff0000;
/*过渡效果*/
transition: background-color .5s ease-out 0s, border-radius .35s ease-in 0s;
}
.box:hover {
background-color: #000;
border-radius: 80px;
}
transiition放在hover前后的区别:
①前:鼠标悬停在元素后,元素会按照所设定时间和延迟缓慢显示效果;当鼠标移走后,还是会按照所定时间和延迟 缓慢回到原状态
②后:鼠标悬停在元素后,元素会缓慢显示效果;不过当鼠标移走后,过渡则无效,元素也就没有缓慢过渡的效果,会一瞬间回到原状态
注:不是所有的CSS样式值都可以过渡(如:display),只有具有中间值的属性才具备过渡效果 ,具体如下:
颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度:
[1]max-height min-height max-width min-width height width
[2]border-width margin padding outline-width outline-offset
[3]font-size line-height text-indent vertical-align
[4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
二、2D transform
transform 翻译成汉语具有"变换"或者"改变"的意思。
通过此属性具有非常强大的功能,如可以实现元素的位移、拉伸、缩放或旋转等效果
最能体现transform 属性强大实力的是实现元素的3D变换效果。
2D变换则是指在一个平面对元素进行操作。
- 明确一下坐标系:
对上面坐标系简单分析如下:
(1)默认状态下,x轴是水平的,向右为正。
(2)默认状态下,y轴是垂直的,向下为正,这与传统的数学坐标系不同。
transform的基本属性值
(1)2D位移 translate( )
-
translate(x,y) (X轴,Y轴),两值一样时,可简写为一位
-
注:当translate 只有一个值的时候,默认y=0,只移动x轴;且位移最好写在最前面
-
将元素向指定的方向移动,类似于position中的relative,即相对于元素本身移动。
-
水平移动:向右移动translate(tx,0)和向左移动translate(-tx,0);
-
垂直移动:向上移动translate(0,-ty)和向下移动translate(0,ty);
-
对角移动:右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。
div {
transform: translate(100px,20px):
}
(2)2D缩放scale( )
-
让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值,使一个元素缩小;而任何大于或等于1.01的值,让元素放大。
-
缩放scale()函数和translate()函数的语法非常相似,他可以接受一个值,也可以同时接受两个值,如果只有一个值时,其第二个值默认与第一个值相等。例如,scale(1,1)元素不会有任何变化,而scale(2,2)让元素沿X轴和Y轴放大两倍。
-
scaleX():相当于scale(sx,1)。表示元素只在X轴(水平方向)缩放元素,其默认值是1。
-
scaleY():相当于scale(1,sy)。表示元素只在Y轴(纵横方向)缩放元素,其默认值是1。
div {
transform: scale(2,1.5);
}
(3)2D旋转rotate( )
- 旋转rotate(360deg)函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。
- 它主要在二维空间内进行操作,接受一个角度值(-360~360deg),用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。
- rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转(①以人物为例:正值向后躺着转,负值向前扑着转;②以左手大拇指指向自己为X轴,正值其他四指向右倒顺时针旋转,负值其他四指向左躺逆时针旋转)
- rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转
- 变换旋转基准点:transform-origin: 0px/% 0px/%;
- ( 水平方向leftr | center | right或value 垂直方向top | center | bottom或value;)
div {
transform: rotate(30deg);
}
(4)2D拉伸skew( )
- 倾斜skew(x,y) | skewX( ) | skewY( )函数 能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
- 一个参数时:表示水平方向的倾斜角度;
- 两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度
transform的变形原点——transform-origin属性
transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转
注:该属性只有在设置了transform属性的时候起作用;
因为我们元素默认基点就是其中心位置,换句话说我们没有使用transform-origin改变元素基点位置的情况下,transform进行的rotate,translate,scale,skew等操作都是以元素自己中心位置进行变化的。
三、案例
动画——缓缓打开的扇子
<!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>
* {
margin: 0;
padding: 0;
}
div {
width: 30px;
height: 500px;
/* border: 1px solid red; */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transform: rotate(-80deg);
transform-origin: center 420px;
}
p {
width: 30px;
height: 500px;
border: 1px skyblue dashed;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
transform-origin: center 420px;
transition: all 2s;
}
div:hover p:nth-child(2) {
transform: rotate(10deg);
}
div:hover p:nth-child(3) {
transform: rotate(20deg);
}
div:hover p:nth-child(4) {
transform: rotate(30deg);
}
div:hover p:nth-child(5) {
transform: rotate(40deg);
}
div:hover p:nth-child(6) {
transform: rotate(50deg);
}
div:hover p:nth-child(7) {
transform: rotate(60deg);
}
div:hover p:nth-child(8) {
transform: rotate(70deg);
}
div:hover p:nth-child(9) {
transform: rotate(80deg);
}
div:hover p:nth-child(10) {
transform: rotate(90deg);
}
div:hover p:nth-child(11) {
transform: rotate(100deg);
}
div:hover p:nth-child(12) {
transform: rotate(110deg);
}
div:hover p:nth-child(13) {
transform: rotate(120deg);
}
div:hover p:nth-child(14) {
transform: rotate(130deg);
}
div:hover p:nth-child(15) {
transform: rotate(140deg);
}
div:hover p:nth-child(16) {
transform: rotate(150deg);
}
div:hover p:nth-child(17) {
transform: rotate(160deg);
}
div:hover p:nth-child(18) {
transform: rotate(170deg);
}
i {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
left: 10px;
bottom: 75px;
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<i></i>
</div>
</body>
</html>