CSS3(8)过渡
它是如何工作?
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
代码:
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
还可以指定每个方向上的速度:
看我
代码:
div.div2
{
width:100px;
height:100px;
background:red;
transition:width 2s,height 2s,transform 2s;
}
div.div2:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
}