CSS之:active选择器
Active的一段話
?active的英文解釋為“積極的”,表現(xiàn)在鼠標(biāo)上就是點(diǎn)擊的意思。關(guān)于active選擇器最多的示例恐怕就是應(yīng)用在鏈接上面的,然而打開(kāi)鏈接是一個(gè)一瞬間的動(dòng)作,這不能很好的體現(xiàn)active選擇器的特點(diǎn)。
?
Active的特點(diǎn)
其實(shí)我們打開(kāi)一個(gè)帶有active鏈接,激活acive是有一個(gè)過(guò)程的,就是點(diǎn)擊模塊后直到松開(kāi)模塊。如果我們不指定這個(gè)過(guò)程所花費(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>?
我們可以通過(guò)過(guò)渡屬性(transition)來(lái)調(diào)整這個(gè)時(shí)間。
a:active{background:indigo;transition:3s;}?
讀者可以做一個(gè)實(shí)驗(yàn),改變其中transition的值,然后測(cè)試:avtive選擇器所花費(fèi)的時(shí)間。
?
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>這里面有兩個(gè)transition,也就是意味著有兩個(gè)過(guò)渡。
如果讀者只設(shè)置了在 div?里面的 transition?,那么選擇器的過(guò)渡時(shí)間也就默認(rèn)為?div?里的 transition?了
?
https://www.cnblogs.com/ghost-xyx/p/3763669.html(更多偽元素及其用法)
轉(zhuǎn)載于:https://www.cnblogs.com/raind/p/9408983.html
總結(jié)
以上是生活随笔為你收集整理的CSS之:active选择器的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: log-slave-updates 引起
- 下一篇: addEntriesFromDictio