barre de navigation animée CSS3 modèle 3D-Questions et réponses frontales-php.cn

barre de navigation animée CSS3 modèle 3D

jacklove

Libérer： 2018-06-11 22:56:55

original

2890 Les gens l'ont consulté

Disque réseau de code source

Basé sur la petite barre de navigation d'effets spéciaux CSS3 réalisée par MOOC.com, les icônes sont affichées de différentes manières

页面布局

<!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>

Copier après la connexion

样式

*{
    -webkit-box-sizing: border-box;
}
html,body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #47c9af;;
    color: #74777b;
    font-family: &#39;Raleway&#39;, Arial, sans-serif;
}

ul {
    list-style: none;
}

a{
    text-decoration: none;
    color: rgba(0, 0, 0, 0.3);
    display: inline-block;
    font-weight: 700;
}

a:hover, .nav a:focus {
    color: #fff;
}

.nav {
    width: 820px;
    height: 300px;
    margin: 200px auto 0 auto;
    font-weight: 300;
}

.nav ul li {
    display: inline-block;
    position: relative;
    margin: 0 20px;
    font-size: 1.5em;
}

.tooltip-content {
    position: absolute;
    width: 80px;
    height: 80px;
    padding-top: 25px;
    left: 50%;
    margin-left: -40px;
    bottom: 20px;
    border-radius: 50%;
    text-align: center;
    background: #fff;
    color: #47c9af;
    opacity: 0;
    margin-bottom: 20px;
    cursor: pointer;
}

.tooltip-effect-1 .tooltip-content {
    -webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);
    -webkit-transform-origin: 50% 100%;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-1 .tooltip-content i {
    -webkit-transform: scale3d(0, 0, 1);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-2 .tooltip-content {
    -webkit-transform: translate3d(0, 10px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-2 .tooltip-content i {
    -webkit-transform: translate3d(0, 15px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-3 .tooltip-content {
    -webkit-transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);
    -webkit-transform-origin: 50% 100%;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-3 .tooltip-content i {
    -webkit-transform: scale3d(0, 0, 1);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-4 .tooltip-content {
    -webkit-transform: translate3d(0, -20px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-4 .tooltip-content i {
    -webkit-transform: translate3d(0, 20px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-5 .tooltip-content {
    -webkit-transform: scale3d(0, 0, 1);
    -webkit-transform-origin: 50% 100%;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-5 .tooltip-content i {
    -webkit-transform: translate3d(0, 20px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

Copier après la connexion

Cet article explique la barre de navigation animée CSS3 en 3D Pour plus de contenu connexe, veuillez faire attention au site Web chinois php.

Recommandations associées :

Le front-end appelle l'interface de paiement WeChat

Objet jQuery et objet DOM

Méthode d'écriture standard pour le développement de plug-ins jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!