新增第114个小实例：Tabbar图标栏动画切换特效
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
7d2f9a31b4
commit
50768b8c9e
|
|
@ -117,4 +117,5 @@
|
|||
110. HTML5+CSS3小实例：百看不腻的旋转loading动画
|
||||
111. HTML5+CSS3+JQuery小实例：DIY切换衣服图案
|
||||
112. HTML5+CSS3小实例：纯CSS实现文本背景扫光效果
|
||||
113. HTML5+CSS3+JS小实例：圆形剪切图片光标悬停特效
|
||||
113. HTML5+CSS3+JS小实例：圆形剪切图片光标悬停特效
|
||||
114. HTML5+CSS3+JS小实例：Tabbar图标栏动画切换特效
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* :root选择器匹配文档根元素 */
|
||||
:root{
|
||||
/* 定义自定义颜色 */
|
||||
--bg-color:#2962ff60;
|
||||
--blue:#2962ff;
|
||||
--blue30:#2962ff30;
|
||||
--blue60:#2962ff60;
|
||||
--red:#ff6776;
|
||||
--red30:#ff677630;
|
||||
--red60:#ff677660;
|
||||
--green:#00c853;
|
||||
--green30:#00c85330;
|
||||
--green60:#00c85360;
|
||||
--purple:#bf3eff;
|
||||
--purple30:#bf3eff30;
|
||||
--purple60:#bf3eff60;
|
||||
--orange:#ff6d00;
|
||||
--orange30:#ff6d0030;
|
||||
--orange60:#ff6d0060;
|
||||
}
|
||||
body{
|
||||
/* 最小高度：100%窗口高度 */
|
||||
min-height: 100vh;
|
||||
/* 弹性布局 水平+垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 通过var函数调用自定义属性--bg-color，设置body背景色 */
|
||||
background-color: var(--bg-color);
|
||||
/* 设置背景色改变时的过渡效果 */
|
||||
transition: background-color 1s;
|
||||
}
|
||||
.tabbar{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border-radius: 25px;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
.tabbar ul{
|
||||
/* 去掉前面的小黑点 */
|
||||
list-style: none;
|
||||
/* 让li横向排列 */
|
||||
display: flex;
|
||||
}
|
||||
.tabbar ul li{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
/* 弹性布局 居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 15px;
|
||||
/* 光标变小手 */
|
||||
cursor: pointer;
|
||||
/* 设置过渡 */
|
||||
transition: 1s;
|
||||
}
|
||||
.tabbar ul li img{
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
/* 对图片进行剪切，保留原始比例 */
|
||||
object-fit: cover;
|
||||
/* 图片在容器的正中间 */
|
||||
object-position: center;
|
||||
/* 圆形图片 */
|
||||
border-radius: 50%;
|
||||
}
|
||||
.tabbar ul li .fa{
|
||||
/* 字体图标大小 */
|
||||
font-size: 28px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
/* 分别为每一个选中项的字体图标设置颜色（通过var函数调用自定义颜色进行设置） */
|
||||
.tabbar ul li:nth-child(2).active .fa{
|
||||
color: var(--red);
|
||||
}
|
||||
.tabbar ul li:nth-child(3).active .fa{
|
||||
color: var(--green);
|
||||
}
|
||||
.tabbar ul li:nth-child(4).active .fa{
|
||||
color: var(--purple);
|
||||
}
|
||||
.tabbar ul li:nth-child(5).active .fa{
|
||||
color: var(--orange);
|
||||
}
|
||||
/* 选中项的背景圆 */
|
||||
.active-circle{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: red;
|
||||
border-radius: 50%;
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 27px;
|
||||
left: 30px;
|
||||
/* 设置过渡 */
|
||||
transition: 0.4s ease-in-out;
|
||||
}
|
||||
/* 分别为每一个选中项的背景圆设置位置、背景色 */
|
||||
.tabbar ul li:nth-child(1).active ~ .active-circle{
|
||||
left: 30px;
|
||||
background-color: var(--blue30);
|
||||
}
|
||||
.tabbar ul li:nth-child(2).active ~ .active-circle{
|
||||
left: 108px;
|
||||
background-color: var(--red30);
|
||||
}
|
||||
.tabbar ul li:nth-child(3).active ~ .active-circle{
|
||||
left: 186px;
|
||||
background-color: var(--green30);
|
||||
}
|
||||
.tabbar ul li:nth-child(4).active ~ .active-circle{
|
||||
left: 264px;
|
||||
background-color: var(--purple30);
|
||||
}
|
||||
.tabbar ul li:nth-child(5).active ~ .active-circle{
|
||||
left: 342px;
|
||||
background-color: var(--orange30);
|
||||
}
|
||||
/* 选中项的背景圆的果冻动画 */
|
||||
.jello{
|
||||
/* 执行动画：动画名 时长 线性的 停留在最后一帧 */
|
||||
animation: jello 0.8s linear forwards;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
/* 果冻Q弹感觉 */
|
||||
@keyframes jello {
|
||||
0%{
|
||||
transform: scale(1,1);
|
||||
}
|
||||
30%{
|
||||
transform: scale(1.25,0.75);
|
||||
}
|
||||
40%{
|
||||
transform: scale(0.75,1.25);
|
||||
}
|
||||
50%{
|
||||
transform: scale(1.15,0.85);
|
||||
}
|
||||
65%{
|
||||
transform: scale(0.95,1.05);
|
||||
}
|
||||
75%{
|
||||
transform: scale(1.05,0.95);
|
||||
}
|
||||
100%{
|
||||
transform: scale(1,1);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!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>Tabbar图标栏动画切换特效</title>
|
||||
<!-- 引入字体图标 -->
|
||||
<link rel="stylesheet" href="/fonts/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="114.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tabbar">
|
||||
<ul>
|
||||
<li class="item active" onclick="setActive(this,'--blue60')">
|
||||
<img src="/images/op/asl/a.jpg" alt="">
|
||||
</li>
|
||||
<li class="item" onclick="setActive(this,'--red60')">
|
||||
<i class="fa fa-heart-o"></i>
|
||||
</li>
|
||||
<li class="item" onclick="setActive(this,'--green60')">
|
||||
<i class="fa fa-plus-square-o"></i>
|
||||
</li>
|
||||
<li class="item" onclick="setActive(this,'--purple60')">
|
||||
<i class="fa fa-bell-o"></i>
|
||||
</li>
|
||||
<li class="item" onclick="setActive(this,'--orange60')">
|
||||
<i class="fa fa-user-o"></i>
|
||||
</li>
|
||||
<div class="active-circle"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<script src="114.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
// 获取所有.item元素
|
||||
let items=document.querySelectorAll('.item');
|
||||
// 获取选中项的背景圆
|
||||
let active_circle=document.querySelector('.active-circle');
|
||||
|
||||
// 设置当前选中项样式的方法
|
||||
// 参数：_t 当前点击的对象，bg_color 颜色值（用于设置body的背景颜色）
|
||||
function setActive(_t,bg_color){
|
||||
// 遍历所有.item元素，移除active样式
|
||||
items.forEach((item)=>{
|
||||
item.classList.remove('active');
|
||||
})
|
||||
// 为当前选中项添加active样式
|
||||
_t.classList.add('active');
|
||||
// 为背景圆添加jello样式
|
||||
active_circle.classList.add('jello');
|
||||
// 发现果冻效果只有第一次会，是因为我们没有移除jello
|
||||
// 我们这里设置0.5秒后移除，确保每一次点击都有Q弹的感觉
|
||||
setTimeout(() => {
|
||||
active_circle.classList.remove('jello');
|
||||
}, 500);
|
||||
// 设置自定义属性--bg-color的值
|
||||
document.documentElement.style.setProperty('--bg-color','var('+bg_color+')');
|
||||
}
|
||||
Loading…
Reference in New Issue