ホームページ > 記事 > ウェブフロントエンド > CSS :active selectorのサンプルコードの詳細説明
CSS :active selectorのサンプルコードの詳細説明
- 黄舟オリジナル
- 2017-07-19 17:07:191959ブラウズ
Active
activeの一節は、英語では「active」、つまりマウスをクリックすることを意味すると解釈されます。アクティブ セレクターの最も一般的な例はおそらくリンクに適用されますが、リンクを開くのは瞬間的なアクションであり、アクティブ セレクターの特性を十分に反映していません。
アクティブの特徴
実際、アクティブでリンクを開くと、モジュールを解放するまでモジュールをクリックするという、アクティブをアクティブにするプロセスがあります。この処理にかかる時間を指定しない場合、デフォルトでは 10 分の数秒かかると思います。
<!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 セレクターによって費やされた時間をテストできます。
アクティブな例
<!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>遷移が 2 つあるということは、遷移が 2 つあることを意味します。
最初のトランジションは、アクティブセレクターをアクティブにすることです。この時点で、p:avtive のトランジションが機能します。
2 番目のトランジションでは、マウスを放すと、画像のサイズが通常に戻ります。この時点で、p のトランジションが有効になります。
リーダーが p の遷移のみを設定する場合、セレクターの遷移時間はデフォルトで p の遷移になります。
以上がCSS :active selectorのサンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。