CSS3 animierte Navigationsleiste 3D-Front-End-Fragen und Antworten-php.cn

CSS3 animierte Navigationsleiste 3D

jacklove

Freigeben： 2018-06-11 22:56:55

Original

2834 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!