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和其他选择器的组合。
今天的文章CSS之详解:active选择器分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/62640.html
