transition:
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
Safari 支持替代的 -webkit-transition 属性。
注释:Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
HTML:
<div>
<img src="1.jpg" alt="Image">
<span></span>
</div>
CSS:
div{
width:300px;
height:200px;
background:#fff;
border:1px solid #333;
position:relative;
}
div img{
display:block;
padding:5px;
width:290px;
height:190px;
}
div span{
display:block;
opacity:0;
width:100%;
height:100%;
background:#fff;
transition: opacity .5s;
-moz-transition: opacity .5s; /* Firefox 4 */
-webkit-transition: opacity .5s; /* Safari 和 Chrome */
-o-transition: opacity .5s; /* Opera */
position:absolute;
left:0;
top:0;
}
div span:hover{
opacity:.5;
}
这样用CSS的transition属性,就会有一个鼠标hover以后淡入一个白色半透明的遮罩层,除了代码中演示的属性值,transition完整语法如下:
transition: property duration timing-function delay;