Heim >Web-Frontend >CSS-Tutorial >Reines CSS realisiert eine schrittweise Hervorhebung, wenn die Maus hinein bewegt wird
Reines CSS realisiert eine schrittweise Hervorhebung, wenn die Maus hinein bewegt wird
- 不言Original
- 2018-05-03 14:31:033613Durchsuche
In diesem Artikel wird hauptsächlich reines CSS vorgestellt, um eine schrittweise Hervorhebung beim Bewegen der Maus zu erreichen. Jetzt kann ich es mit Ihnen teilen.
Dieses Beispiel verwendet hauptsächlich den Übergang Um dies zu erreichen, wird die Beschriftung nach und nach hervorgehoben, und es findet ein schrittweiser Prozess statt. Spezifische Methode: Hintergrundfarbe, Farbe und andere Attribute als Animation ausführen.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移入文本高亮显示</title>
<style type="text/css">
li{
width: 400px;
list-style: none;
line-height: 2rem;
color: black;
transition: background-color 1s linear,color 1s linear;
-webkit-transition: background-color 1s linear,color 1s linear;
-moz-transition: background-color 1s linear,color 1s linear;
-o-transition: background-color 1s linear,color 1s linear;
}
li:hover{
background-color: #FF3d67;
color: blue;
}
</style>
</head>
<body>
<ul>
<li>1.秦时明月之君临天下</li>
<li>2.秦时明月之沧海横流</li>
<li>3.秦时明月之诸子百家</li>
</ul>
</body>
</html>Effektvergleich
 |
 |
Verwandte Empfehlungen:
CSS, um einen mehrstufigen Faltmenüeffekt zu erzielen
CSS-Implementierung zur Behebung schwebender Probleme
Das obige ist der detaillierte Inhalt vonReines CSS realisiert eine schrittweise Hervorhebung, wenn die Maus hinein bewegt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!