css3动画导航栏3D
程序员文章站
2022-03-30 14:28:55
...
源码网盘
根据慕课网做的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 ，更多相关内容请关注。
相关推荐：
以上就是css3动画导航栏3D的详细内容，更多请关注其它相关文章！
上一篇： nginx - 峰值4万/s的php接口大概需要多少计算资源？
下一篇： PHP QQ登录接口应用