CSS3案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{
margin:0;
}
div{
width:150px;
height:150px;
background: #ffb568;
font:30px/202px 'Arial';
color:red;
text-align: center;
margin: 0 auto;
border-radius:50%;
}
.yuan3{
display: none;
/*transition指的是變換，參數有變換時間，延遲時間，變化曲線，寬度高度顏色變化等*/
transition:1s;
}
.yuan2:hover~.yuan3{
display: block;
background: #3fb8ff;
}
.yuan3:hover{
display:block;
}
.yuan5{
/*opacity是不透明度*/
opacity: 0;
width:0;
height: 0;
/*transition寫在這里才是.yuan5常有的屬性，無論出現還是消失都會有動畫的效果*/
transition:1s;
overflow:hidden;/*如果圓圈中的數字超過區域就隱藏*/
}
.yuan4:hover~.yuan5{
/*如果將transition寫在這里的話，只有當鼠標懸停在.yuan4上的時候才會有效果，
當鼠標移出.yuan2的區域時，因為不出發hover的條件，所以消失的時候就沒有變化效果了，
結果就是瞬間消失*/
opacity: 1;
width:150px;
height: 150px;
background: #43ff0b;
}
.yuan5:hover{
opacity: 1;
width:150px;
height: 150px;
background: #43ff0b;
}
</style>
<body>
<div class="yuan1">1</div>
<div class="yuan2">2</div>
<div class="yuan3">3</div>
<div class="yuan4">4</div>
<div class="yuan5">5</div>
<div class="yuan6">6</div>
</body>
</html>
transition
可以設置顏色，寬度，高度，變化曲線等的變化；
如果需要實現從無到有的動畫變化，那個兩個值就要存在一個中間值，比如0和1；而none和block就沒有中間值，所以這個變化就不能以動畫的形式呈現出來，只能實現一瞬間的變化。
opacity
設置不透明度，0表示透明，但是區域還占有位置。
如果要實現僅僅是高度的動畫效果，那么就要使寬度固定，position-property:all