css3动画导航栏3D

来源：动视网责编：小采时间：2020-11-27 15:03:38

css3动画导航栏3D

css3动画导航栏3D:源码网盘根据慕课网做的css3小特效导航栏，图标以不同方式显示页面布局 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document

推荐度：

点击下载本文 文档为doc格式

导读css3动画导航栏3D:源码网盘根据慕课网做的css3小特效导航栏，图标以不同方式显示页面布局 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document

源码网盘

根据慕课网做的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 ，更多相关内容请关注Gxl网。

css3动画导航栏3D

css3动画导航栏3D:源码网盘根据慕课网做的css3小特效导航栏，图标以不同方式显示页面布局 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document

推荐度：

点击下载本文 文档为doc格式

标签：动画 3d 导航栏

热门焦点

css3动画导航栏3D

css3动画导航栏3D

源码网盘

css3动画导航栏3D

最新推荐

猜你喜欢

热门推荐