<!DOCTYPE html>
<html>
<head>
</head>
<body id="body">
<!--
/*transition過渡特效*/
第一步：設置目標元素div2的初始樣式
第二步：設置目標元素div2在鼠標hover時的表現樣式
第三步：給目標元素添加transition屬性，並指定需要過渡的屬性
/*固定寬高盒子上下左右居於不定寬高容器正中*/
第一步：設置待定位盒子和寬高值
第二步：將待定位盒子position屬性設為absolute使其相對於父元素絕對定位（相對於static定位以外的第一個父元素進行定位）,
使其頂部和左側定位距離設為父元素高和寬的50%（即：先將盒子定位到“父元素4分之1區域的右下部”）
第三步：把待定位盒子的margin-top值和margin-left值設為其高度和寬度一半的負值（即：把盒子從右下區域拉回正中間）
-->
<div id="div2">
<div>
content content content content content content content content
</div>
</div>
<style>
* {
margin:0;
padding:0;
}
#body {
background-color:green;
}
#div2 {
width:300px;
height:200px;
background-color:red;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
transition:all 3s;
/*transition:width 3s,height 3s,margin-top 3s,margin-left 3s,background-color 3s;*/ /*屬性隨相同時間過渡，整體過渡顯得很規則*/
/*transition:width 1s,height 2s,margin-top 2s,margin-left 3s,background-color 3s;*/ /*屬性隨不同時間過渡，整體過渡顯得更有動態感*/
}
#div2:hover {
width:600px;
height:400px;
margin-top:-200px;
margin-left:-300px;
background-color:yellow;
}
</style>
<script src="jquery-2.1.1.min.js"></script>
<script>
</script>
</body>
</html>
