一个元素在不同的状态之间进行平滑的交换
CSS3中使用transition属性实现过度效果
一个简单的例子:
img{
background-image:url("img/1.jpg");
}
img:hover{ transform:rotate(180deg); //2D转换:顺时针旋转180° background-color:green; //背景颜色:绿色 } 这样的话鼠标悬停 图片会立马旋转180° 背景颜色也会立刻显示,没有任何过度效果
如果我们给img元素添加以下代码
img{ transition:2s; //过度:2s内完成 }