css3动画导航栏3D

互联网 18-6-11

源码网盘

根据慕课网做的css3小特效导航栏，图标以不同方式显示

页面布局  <!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: 'Raleway', 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); }

css3动画导航栏3D

源码网盘

相关资讯

标签推荐