Reines CSS realisiert eine schrittweise Hervorhebung, wenn die Maus hinein bewegt wird-CSS-Tutorial-php.cn

Reines CSS realisiert eine schrittweise Hervorhebung, wenn die Maus hinein bewegt wird

不言

Freigeben： 2018-05-03 14:31:03

Original

3739 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!