transition属性和transform属性
transition
在CSS3里使用transition可以实现补间动画(过度效果),并且当前元素只要有“属性”发生变化时就会存在两种情况。就可以实现平滑的度过,
语法格式:transition:要过度的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化,用逗号隔开
属性 | 描述 |
---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 |
transition-property | 过渡 属性的名称。 |
transition-duration | 过渡效果花费的时间 ,默认是 0。 |
transition-delay | 规定过渡效果何时开始。默认是 0。 |
transition-timing-function | 过渡效果的时间曲线。默认是 “ease”。 |
transform
transform可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式
属性 | 描述 |
---|---|
translate(x,y,z) | 水平方向和垂直方向同时移动 可以3D变形 |
scale(x, y) | 缩放 |
rotate(deg) | 旋转 可以3D变形 |
transform-origin | 可以调整元素转换变形的原点 |
skew(deg, deg) | 倾斜 |
例题:此代码实现的是鼠标hover时 两扇门打开 看到里面的图片
<style>
* {
padding: 0;
margin: 0;
}
.box