本次 用到 CSS3 的
transition(过渡) 属性,
一共有4个属性
transition-property 属性规定 应用过渡效果的 CSS 属性的名称
transition-duration 属性规定 完成过渡效果需要花费的时间(以秒(s)或毫秒(ms)计)。
transition-timing-function 属性规定过渡效果的速度曲线。
inear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 匀速 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 默认 先加速后减速 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 加速 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 减速 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 贝塞尔曲线 |
transition-delay 属性规定过渡效果何时开始。值以秒或毫秒计(s ms)
这些都可以简写:transition: property duration timing-function delay;
transition : width 2s, height 1s (宽度过渡时间2秒,高度过渡时间1秒)
transform
向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
语法:transform: none|transform-functions;
常用的函数:
rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
<style type="text/css">
.box{
width: 180px;height: 180px;border: 1px red solid;
padding: 100px;
-webkit-perspective:150; /* Safari and Chrome */ //显示3d的效果,只在这两个浏览器中支持,firefox 并不支持
}
.box div{
width: 100px;height: 100px;
background: #ff0;
border: 1px black solid;
}
.box:hover div{
transform: rotateY(45deg); //沿着Y轴旋转45度
-webkit-transform: rotateY(45deg); /* Safari and Chrome */
}
</style>