active的英文解釋為"積極的"，表現(xiàn)在鼠標(biāo)上就是點(diǎn)擊的意思。關(guān)于active選擇器最多
的示例恐怕就是應(yīng)用在鏈接上面的，然而打開鏈接是一個(gè)一瞬間的動(dòng)作，這不能很好的體現(xiàn)
active選擇器的特點(diǎn)。
其實(shí)我們打開一個(gè)帶有active鏈接，激活acive是有一個(gè)過程的，就是點(diǎn)擊模塊后直到松開模塊。
如果我們不指定這個(gè)過程所花費(fèi)的時(shí)間，筆者認(rèn)為其默認(rèn)花費(fèi)零點(diǎn)幾秒。
<!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）來調(diào)整這個(gè)時(shí)間。
a:active{
background:indigo;
transition:3s;
}
讀者可以做一個(gè)實(shí)驗(yàn)，改變其中transition的值，然后測試:avtive選擇器所花費(fèi)的時(shí)間。
<!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>
這里面有兩個(gè)transition，也就是意味著有兩個(gè)過渡。
如果讀者只設(shè)置了在 div 里面的 transition ，那么選擇器的過渡時(shí)間也就默認(rèn)為 div 里的 transition 了。
如果讀者有興趣也可以試一試transition和其他選擇器的組合。
【 微信掃一掃 】
