Heim > Artikel > Web-Frontend > CSS3-Implementierung der gemeinsamen Nutzung von Beispielcode für horizontal scrollende Menüschaltflächen

CSS3-Implementierung der gemeinsamen Nutzung von Beispielcode für horizontal scrollende Menüschaltflächen

黄舟Original: 2017-04-24 09:26:161616Durchsuche

Heute möchte ich Ihnen die Implementierung einer schönen horizontalen Bildlaufmenü-Schaltfläche basierend auf CSS3 vorstellen. Freunde, die es benötigen, können darauf verweisen

Ohne weitere Umschweife geht es direkt weiter Bild:

Dann der Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>精美横向滚动菜单按钮 - Glunefish</title>
    </head>
<!-- 这里接下面的行间样式 -->
    <body>
        <ul>
            <li><a href="" class="a1"><span>Home</span></a></li>
            <li><a href="" class="a2"><span>Chat</span></a></li>
            <li><a href="" class="a3"><span>About</span></a></li>
        </ul>
    </body>
</html>

CSS:

 <style>
        ul{list-style:none;}
        ul li a{
            display:block;
            width:40px;
            height:40px; 
            background:rgb(208,165,37); 
            margin-top:10px; 
            text-decoration:none; 
            line-height:40px; 
            position:relative;
            }
        ul li a span{
            width:0; 
            height:40px;
            display:block;
            visibility:hidden;
            overflow:hidden;
            font-weight:bold;
            position:absolute;
            left:40px;
            transition:all 0.3s;
            }
        ul li .a1 span{background:rgb(30,139,180);}
        ul li .a2 span{background:rgb(125,163,23);}
        ul li .a3 span{background:rgb(175,30,131);}
        ul li a:hover span{visibility:visible; width:auto; padding:0 20px;}
    </style>

Der Code ist speziell für eine einfache Lesbarkeit optimiert. Hauptsächlich im Zusammenhang mit:

CSS3-Animation (Übergang)

Ausblenden von Elementen (Überlauf / Sichtbarkeit)

Das obige ist der detaillierte Inhalt vonCSS3-Implementierung der gemeinsamen Nutzung von Beispielcode für horizontal scrollende Menüschaltflächen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Analyse der Vererbung und Kaskadierung von CSS-StilenNächster Artikel：Detaillierte Analyse der Vererbung und Kaskadierung von CSS-Stilen

In Verbindung stehende Artikel

Mehr sehen