Take a look at GW

CSS之详解:active选择器

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，也就是意味着有两个过渡。

    1. 第一个过渡是激活active选择器，这时候 div:avtive 里的 transition 起作用。
    2. 第二个过渡是松开鼠标，图像的尺寸恢复正常的过程，这时候 div 里的 transition 起作用。

如果读者只设置了在 div 里面的 transition ，那么选择器的过渡时间也就默认为 div 里的 transition 了。

 

如果读者有兴趣也可以试一试transition和其他选择器的组合。

 

 

posted @   HDWK  阅读(8358)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示