search

Home >Web Front-end >Front-end Q&A >css3 animated navigation bar 3D

css3 animated navigation bar 3D

jacklove
jackloveOriginal
2018-06-11 22:56:552889browse

Source code network disk

The css3 small special effects navigation bar made based on MOOC.com, the icons are displayed in different ways

页面布局

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

*{
    -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);
}

This article explains the css3 animation Navigation bar 3D, please pay attention to php Chinese website for more related content.

Related recommendations:

The front-end calls the WeChat payment interface

jQuery object and DOM object

jQuery plug-in development standard writing method

The above is the detailed content of css3 animated navigation bar 3D. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Basic use of requests libraryNext article：Basic use of requests library

Related articles

See more