经常见到网站上，鼠标放到一个图片上，图片会稍微变大一点，鼠标移出，图片恢复正常，其实就是应用了样式transform，看下面代码，这里主要注意两个样式，一个是
.newsDL dd:hover .img .bot 动态变化条
.newsDL dd:hover .img img 图片动态放大缩小
其中图片放大缩小时间有 .newsDL dd .img img 这句样式定义
<dl class="newsDL newsDL2 clearfix">
<dd>
<a href="info.aspx?ContentID=1302&t=19">
<div class="img"><span class="bot"></span>
<img src="Uploadfiles/Picture/2017-1-22/20171221659384621_350-234.jpg" alt="杨铿代表参加省两会，提案产业扶贫+教育扶贫践行精准扶贫战略"></div>
<div class="t" title="">杨铿代表参加省两会，提案产业扶贫+教育...</div>
<span class="time"> </a>
</dd>
</dl>
.newsDL dd { float: left; display: block; width: 31%; margin: 0px 3.5% 2% 0px; }
.newsDL dd.item3 { margin-right: 0px; }
.newsDL dd .img { width: 100%; overflow: hidden; margin-bottom: 35px; position: relative; background-color: #000; }
.newsDL dd .img .bot {background-color: #5899DD;height: 5px;overflow: hidden;position: absolute;left: 0px;top: 0px;width: 0350px;z-index: 3;transition: 2000ms;}
.newsDL dd .img img {width: 100%;display: block;transition:900ms;opacity: 1;}
.newsDL dd .t { font-size: 18px; height: 32px; overflow: hidden; transition: 400ms; }
.newsDL dd .time { font-family: Arial; }
.newsDL dd .time .source { font-family: 'Microsoft JhengHei'; }
.newsDL dd:hover .img .bot { width: 100%; }
.newsDL dd:hover .t { text-decoration: underline; }
.newsDL dd:hover .img img { opacity: 0.8; -webkit-transform: scale(1.14); transform: scale(1.2); }