新增第108个小实例：漂亮的导航栏动画效果
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
f9f4b03c7b
commit
e14e38650a
|
|
@ -111,4 +111,5 @@
|
|||
104. HTML5+CSS3小实例：单选按钮的创意动画
|
||||
105. HTML5+CSS3+JS小实例：喜庆绚烂的新年烟花特效
|
||||
106. HTML5+CSS3小实例：2.5D立体文字效果
|
||||
107. HTML5+CSS3小实例：3D导航栏
|
||||
107. HTML5+CSS3小实例：3D导航栏
|
||||
108. HTML5+CSS3+JS小实例：漂亮的导航栏动画效果
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平+垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #333;
|
||||
}
|
||||
.tabbar{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
width: 350px;
|
||||
height: 70px;
|
||||
}
|
||||
.tabbar ul{
|
||||
/* 让li横向排列 */
|
||||
display: flex;
|
||||
}
|
||||
.tabbar ul li{
|
||||
list-style: none;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.tabbar ul li a{
|
||||
/* 弹性布局 居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 垂直排列 */
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.tabbar ul li a .icon{
|
||||
line-height: 70px;
|
||||
font-size: 30px;
|
||||
/* 设置过渡 */
|
||||
transition: 0.5s;
|
||||
}
|
||||
.tabbar ul li a .text{
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
bottom: 13px;
|
||||
/* 设置过渡 */
|
||||
transition: 0.5s;
|
||||
/* 默认隐藏 */
|
||||
transform: scale(0);
|
||||
}
|
||||
.tabbar ul li.active a .icon{
|
||||
font-size: 23px;
|
||||
/* 图标上移 */
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
.tabbar ul li.active a .text{
|
||||
/* 选中,文字显示 */
|
||||
transform: scale(1);
|
||||
}
|
||||
.active-bg{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
/* --c,--cc为CSS中的自定义属性,通过var函数可对其调用 */
|
||||
background-color: var(--c);
|
||||
box-shadow: 0 10px 15px var(--cc);
|
||||
transition: 0.5s;
|
||||
}
|
||||
/* 分别为每一个.active-bg设置颜色,阴影,位移 */
|
||||
.tabbar ul li:nth-child(1).active ~ .active-bg{
|
||||
--c:#ffa502;
|
||||
--cc:#ffa50299;
|
||||
left: 0;
|
||||
}
|
||||
.tabbar ul li:nth-child(2).active ~ .active-bg{
|
||||
--c:#ff6348;
|
||||
--cc:#ff634899;
|
||||
left: calc(1 * 70px);
|
||||
}
|
||||
.tabbar ul li:nth-child(3).active ~ .active-bg{
|
||||
--c:#2ed573;
|
||||
--cc:#2ed57399;
|
||||
left: calc(2 * 70px);
|
||||
}
|
||||
.tabbar ul li:nth-child(4).active ~ .active-bg{
|
||||
--c:#1e90ff;
|
||||
--cc:#1e90ff99;
|
||||
left: calc(3 * 70px);
|
||||
}
|
||||
.tabbar ul li:nth-child(5).active ~ .active-bg{
|
||||
--c:#ff6b81;
|
||||
--cc:#ff6b8199;
|
||||
left: calc(4 * 70px);
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>漂亮的导航栏动画效果</title>
|
||||
<!-- 引入字体图标 -->
|
||||
<link rel="stylesheet" href="/fonts/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="108.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tabbar">
|
||||
<ul>
|
||||
<li class="item active">
|
||||
<a href="#">
|
||||
<span class="icon">
|
||||
<i class="fa fa-home" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="text">首页</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">
|
||||
<span class="icon">
|
||||
<i class="fa fa-heart" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="text">动态</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">
|
||||
<span class="icon">
|
||||
<i class="fa fa-plus-circle" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="text">发布</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">
|
||||
<span class="icon">
|
||||
<i class="fa fa-bell" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="text">消息</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#">
|
||||
<span class="icon">
|
||||
<i class="fa fa-user" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="text">我的</span>
|
||||
</a>
|
||||
</li>
|
||||
<div class="active-bg"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
// 获取所有.item元素
|
||||
let items=document.querySelectorAll(".item");
|
||||
// 设置当前选中项样式的方法
|
||||
function setActive(){
|
||||
// 遍历所有.item元素,移除active样式
|
||||
items.forEach((item)=>{
|
||||
item.classList.remove("active");
|
||||
})
|
||||
// 为当前选中项添加active样式
|
||||
this.classList.add("active");
|
||||
}
|
||||
// 遍历所有.item元素,分别为其设置点击事件
|
||||
items.forEach((item)=>{
|
||||
item.addEventListener("click",setActive);
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue