css3元素过渡效果（鼠标移动上逐渐拉伸）

许多朋友在看到别人网站时候，页面中的div鼠标移动上去会逐渐拉升，这个效果很是炫酷，于是就有很多人通过js来实现这种效果，但是js对于seo是不太利于的，这里教大家用css3实现鼠标移动div元素后逐渐拉伸效果，很简单。

css代码

div{
width:100px;
height:100px;
background:yellow;
transition:width 0.5s;
-moz-transition:width 0.5s; /* Firefox 4 */
-webkit-transition:width 0.5s; /* Safari and Chrome */
-o-transition:width 0.5s; /* Opera */}
div:hover{width:300px;}

<div>鼠标移动到我身上看看效果</div>