css3变形
1.旋转(rotate()): 改变图形的位置,但不改变图形的形状,后面跟的是度数。正值顺时针,负值逆时针。
用法:transform:rotate(45deg);
2. 扭曲 (skew()):让元素倾斜显示。将一个对象一其中心位置围绕xy轴旋转。
用法:transform:skew(x,y); transform:skew(45deg,30deg); 也可以仅用一个元素。x y,前面要表示
3. 缩放( scale()):让对象根据中心 原点对对象进行缩放。
用法:transform:scale(0.5或者1.2)
4. 位移(translate()):将元素向指定的方向移动。
用法:transform:translate(x,y); transform:translate(50px,40px); 也可以仅用一个元素。x y,前面要表示
5. 原点位置移动:(transform-origin: ;)
用法:transform-origin:left top; 还有:bottom center, right top; 等等。用百分数无用。
注意的是:此属性对于浏览器有要求,会有不兼容。
方法:-webkit-transform-origin:left top; (chrome safari)
-ms-transform-origin:left top; (ie9)
-o-transform-origin:left top; (opera)
-moz-transform-origin:left top; (firefox)
css3动画
1. 过渡属性 transition-property:; 就是通过鼠标的单击 获得焦点 被点击 或对元素任何改变中触发 并光滑的一动画效果改变css的属性
应用:transition-property:指定过渡或动态模拟的css属性
div{transition-property:width or height or all;}
div:hover{width:改变后的值;height:改变后的值;}
2. 过渡所需的时间 transition-duration:; 该属性主要用来设置一个属性过渡到另一个属性的时间。也就是从就是从旧属性过渡到新属性的时间。俗称 持续时间。
应用:transition-duration:1s; (需要有属性的变化)
3. 过渡函数 transition-timing-function:; 该属性指的是指定浏览器的过渡速度,以及过渡期间的操作进展情况。
有:ease(默认值)又快到慢,逐渐变慢
linear 始终是恒速
ease-in 速度越来越快
ease-out 速度越来越慢
ease-in-out 先加速再减速
4. 过渡延迟时间 transition-delay 该属性主要用来指定 一个动画开始执行的时间(点上去多久才会开始改变) 注意与transition-duration 区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body{background: #ebebeb;}
.a{width:200px;
height:200px;
border: 10px solid white;
background-color: red;
margin:30px auto;
transition-property:all;
}
.a:hover{height: 300px; width:300px;}
.b{width:200px;
height:200px;
border: 10px solid white;
background-color: blue;
margin:30px auto;
transition-property:all;
transition-duration:1s;
transition-delay:5s;
transition-timing-function:ease-in;
}
.b:hover{border-radius: 100%;}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>