色彩缤纷的Bottom Bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Material BottomBar</title>
<style>
@keyframes morewidth {
from {
padding: 0 12px;
}
to {
padding: 0 18px;
}
}
@keyframes active1 {
to {
}
}
@keyframes active2 {
to {
}
}
@keyframes active3 {
to {
}
}
@keyframes active4 {
to {
}
}
@keyframes active5 {
to {
}
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.bottom-bar {
width: 375px;
height: 56px;
position: relative;
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.bottom-bar li {
flex-grow: 1;
padding: 0 12px;
cursor: pointer;
}
.bottom-bar li:hover {
animation: morewidth 0.2s forwards;
}
.bottom-bar li span {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bottom-bar li span b {
color: white;
font-weight: lighter;
font-size: 12px;
}
.bottom-bar li span b:nth-child(2) {
width: 0;
height: 0;
overflow: hidden;
}
.bottom-bar li:hover span b:nth-child(2) {
width: auto;
height: auto;
}
.bottom-bar li span>b:first-child {
width: 24px;
height: 24px;
display: inline-block;
}
</style>
</head>
<body>
<ul class="bottom-bar">
<li class="bar-item" data-key="page1"><span><b style="background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201705/11/000956z6j6kqje2cqcl8qw.png)"></b><b>one</b></span></li>
<li class="bar-item" data-key="page2"><span><b style="background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201705/11/000742t5wroocscqyr4xou.png)"></b><b>two</b></span></li>
<li class="bar-item" data-key="page3"><span><b style="background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201705/11/000742hx5a0aftaecl3at3.png)"></b><b>three</b></span></li>
<li class="bar-item" data-key="page4"><span><b style="background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201705/11/000742ac6xfyvvarppvp9v.png)"></b><b>four</b></span></li>
<li class="bar-item" data-key="page5"><span><b style="background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201705/11/000742voyzn6nzmg6dfnnf.png)"></b><b>five</b></span></li>
</ul>
<script>
var bar = document.querySelector('.bottom-bar');
bar.addEventListener('mousemove', function (e) {
e.path.forEach(p => {
if (p.className == "bar-item") {
switch (p.dataset.key) {
case "page1":
bar.style.animation = "active1 0.3s forwards";
break;
case "page2":
bar.style.animation = "active2 0.3s forwards";
break;
case "page3":
bar.style.animation = "active3 0.3s forwards";
break;
case "page4":
bar.style.animation = "active4 0.3s forwards";
break;
case "page5":
bar.style.animation = "active5 0.3s forwards";
break;
}
}
})
})
</script>
</body>
</html>
【html&css】欢迎进群免费领取学习资料，搜群【WEB前端互动交流群】
