本文发布于3200天前，最后更新于 2057 天前，其中的信息可能已经有所发展或是发生改变。
CSS3有很多动态效果显示，这样子就可以省去js代码了
比如说我要使一个div元素在被选中时自动将宽度扩大100px
那么就要使用transition
代码可以这么写:
<!Doctype html>
<head>
<style>
.div1{
width:300px;
text-align:center;
transition:width 1s;//设置变化的元素，以及变化总过程的时间为1s（秒）
background-color:yellow;//设置背景颜色方便观察
height:100px;
}
p{
padding-top:40px;//设置p元素到div顶部的内边距为40px
}
.div1:hover{
width:400px;
}
</style>
</head>
<body>
<div class="div1">
<p>这是个测试用的div元素</p>
</div>
</body>
</html>
↓↓↓下面是测试↓↓↓
这是个测试用的div元素
这是个测试用的div元素
