Heim >Web-Frontend >CSS-Tutorial >Ausführliche Erläuterung des Beispielcodes des CSS:aktiven Selektors
Ausführliche Erläuterung des Beispielcodes des CSS:aktiven Selektors
- 黄舟Original
- 2017-07-19 17:07:192017Durchsuche
Eine Passage aus Active
Die englische Erklärung von active ist „active“, was „Klicken mit der Maus“ bedeutet. Das häufigste Beispiel für den aktiven Selektor ist wahrscheinlich die Anwendung auf Links. Das Öffnen eines Links ist jedoch eine vorübergehende Aktion, die die Eigenschaften des aktiven Selektors nicht gut widerspiegelt.
Funktionen von Active
Tatsächlich gibt es einen Prozess, um Active zu aktivieren, wenn wir einen Link mit Active öffnen ist, auf das Modul zu klicken, bis das Modul freigegeben wird. Wenn wir die Zeit, die dieser Vorgang benötigt, nicht angeben, dauert er meiner Meinung nach standardmäßig einige Zehntelsekunden.
<!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>
Wir können diese Zeit über das Übergangsattribut anpassen.
a:active{
background:indigo;
transition:3s;
}
Leser können ein Experiment durchführen, den Wert des Übergangs ändern und dann testen: die Kosten dafür die aktive Selektorzeit.
AKTIVES Beispiel
<!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>Es gibt zwei Übergänge, was bedeutet, dass es zwei Übergänge gibt.
Der erste Übergang besteht darin, den aktiven Selektor zu aktivieren, zu diesem Zeitpunkt p : Der Übergang in aktiven Werken.
Der zweite Übergang erfolgt, wenn die Maus losgelassen wird und die Bildgröße wieder normal wird. Zu diesem Zeitpunkt wird der Übergang in p wirksam.
Wenn der Leser nur den Übergang in p festlegt, wird die Übergangszeit des Selektors standardmäßig auf den Übergang in p eingestellt.
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Beispielcodes des CSS:aktiven Selektors. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!