Heim > Artikel > Web-Frontend > CSS3 animierte Navigationsleiste 3D

CSS3 animierte Navigationsleiste 3D

jackloveOriginal: 2018-06-11 22:56:552820Durchsuche

Quellcode-Netzwerkdiskette

Basierend auf der CSS3-Navigationsleiste für kleine Spezialeffekte von MOOC.com werden die Symbole auf unterschiedliche Weise angezeigt

页面布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<p class="nav">
    <ul>
        <li>
            <a class="tooltip tooltip-effect-1" href="#">Home
                <span class="tooltip-content">
                <i class="fa fa-fw fa-home"></i>
            </span>
            </a>
        </li>
        <li>
            <a class="tooltip tooltip-effect-2" href="#">About me
                <span class="tooltip-content">
            <i class="fa fa-fw fa-user"></i>
        </span>
            </a>
        </li>
        <li>
            <a class="tooltip tooltip-effect-3" href="#">Photography
                <span class="tooltip-content">
                <i class="fa fa-fw fa-camera-retro"></i>
            </span>
            </a>
        </li>
        <li>
            <a class="tooltip tooltip-effect-4" href="#">Work
                <span class="tooltip-content">
                <i class="fa fa-fw fa-briefcase"></i>
            </span>
            </a>
        </li>
        <li>
            <a class="tooltip tooltip-effect-5" href="#">Contact
                <span class="tooltip-content">
                <i class="fa fa-fw fa-envelope"></i>
            </span>
            </a>
        </li>
    </ul>
</p>
</body>
</html>

rrree

In diesem Artikel wird die CSS3-Animation der 3D-Navigationsleiste erläutert. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Das Front-End ruft die WeChat-Zahlungsschnittstelle auf

jQuery-Objekt und DOM-Objekt

Standardschreibmethode für die jQuery-Plug-in-Entwicklung

Das obige ist der detaillierte Inhalt vonCSS3 animierte Navigationsleiste 3D. 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：Grundlegende Verwendung der AnforderungsbibliothekNächster Artikel：Grundlegende Verwendung der Anforderungsbibliothek

In Verbindung stehende Artikel

Mehr sehen