Active的一段話 active的英文解釋為“積極的”，表現在滑鼠上就是點擊的意思。關於active選擇器最多的示例恐怕就是應用在鏈接上面的，然而打開鏈接是一個一瞬間的動作，這不能很好的體現active選擇器的特點。 Active的特點 其實我們打開一個帶有active鏈接，激活acive是有一個 ...
Active的一段話
active的英文解釋為“積極的”，表現在滑鼠上就是點擊的意思。關於active選擇器最多的示例恐怕就是應用在鏈接上面的，然而打開鏈接是一個一瞬間的動作，這不能很好的體現active選擇器的特點。
Active的特點
其實我們打開一個帶有active鏈接，激活acive是有一個過程的，就是點擊模塊後直到鬆開模塊。如果我們不指定這個過程所花費的時間，筆者認為其預設花費零點幾秒。
<!DOCTYPE html>
<html>
<head>
<title>a</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
a{
display:block;
width:30px;
margin:20px;
border-radius:8px;
padding:20px 50px;
text-align:center;
background:green;
}
a:active{
background:indigo;
}
</style>
</head>
<body>
<a href="paris.jpg">link</a>
</body>
</html>
我們可以通過過渡屬性（transition）來調整這個時間。
a:active{
background:indigo;
transition:3s;
}
讀者可以做一個實驗，改變其中transition的值，然後測試:avtive選擇器所花費的時間。
ACTIVE示例
<!DOCTYPE html>
<html>
<head>
<title>a</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
div
{
width:100px;
height:100px;
background:red;
transition: 5s;
}
div:active
{
width:300px;
height:300px;
transition:3s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
這裡面有兩個transition，也就是意味著有兩個過渡。
- 第一個過渡是激活active選擇器，這時候 div:avtive 里的 transition 起作用。
- 第二個過渡是鬆開滑鼠，圖像的尺寸恢復正常的過程，這時候 div 里的 transition 起作用。
如果讀者只設置了在 div 裡面的 transition ，那麼選擇器的過渡時間也就預設為 div 里的 transition 了。
如果讀者有興趣也可以試一試transition和其他選擇器的組合。
