CSS :active選擇器的實例代碼詳解
- 黄舟原創
- 2017-07-19 17:07:191958瀏覽
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>
p {
width:100px;
height:100px;
background:red;
transition: 5s;
}
p:active {
width:300px;
height:300px;
transition:3s;
}
</style>
</head>
<body>
<p></p>
</body></html>這裡面有兩個transition，也就是意味著有兩個過渡。
#第一個過渡是啟動active選擇器，這時候p: avtive 裡的transition 起作用。
第二個過渡是放開滑鼠，影像的尺寸恢復正常的過程，這時候 p 裡的 transition 起作用。
如果讀者只設定了在 p 裡面的 transition ，那麼選擇器的過渡時間也就預設為 p 裡的 transition 了。
##
以上是CSS :active選擇器的實例代碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn