运行的效果如下:
当鼠标移动时,实现宽度变化的动画效果
Html部分代码如下:
<div >
<table class="listTable" border="1" >
<tr>
<td >
<div class="prctPic prctPic01"></div>
<div class="prctName">标题党</div>
<div class="prctInfo">内容</div>
</td>
<td >
<div class="prctPic prctPic02"></div>
<div class="prctName">标题党</div>
<div class="prctInfo">内容</div>
</td>
<td >
<div class="prctPic prctPic03"></div>
<div class="prctName">标题党</div>
<div class="prctInfo">内容</div>
</td>
<td >
<div class="prctPic prctPic04"></div>
<div class="prctName">标题党</div>
<div class="prctInfo">内容</div>
</td>
</tr>
</table>
</div>
CSS代码如下:
.listTable{width:100%;height:260px;border:0px none #e3e3e3;border-collapse:separate;border-spacing:0px;}
.listTable td{width:100px;border:1px solid #e3e3e3;position:relative; transition:width 0.3s ease-in 0s;}
.listTable td:hover{width:300px;}
.listTable td div{position:absolute;left:0px;width:100%;}
.listTable td .prctPic{height:260px;bottom:0px;}
.listTable td .prctName{font-size:23px;color:#05192a;text-align:center;top:10px;}
.listTable td .prctInfo{font-size:14px;color:#FFFFFF;text-align:center;top:56px;}
.listTable td .prctPic.prctPic01{background:#F90;}
.listTable td .prctPic.prctPic02{background:#F66}
.listTable td .prctPic.prctPic03{background:#F3C}
.listTable td .prctPic.prctPic04{background:#96F}
transition:width 0.3s ease-in 0s;
包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。
// Mozilla内核: -moz-transition
// Webkit内核:-webkit-transition
//Opera:-o-transition
//W3C 标准:transition
注:IE不支持的.
------记录完毕-----------