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和其他選擇器的組合。