前端实现底部tapbar栏代码
今天给大家实现一个好看的底部tapbar栏,我们要实现的效果如下:
接着看一下具体实现的代码。
HTML代码:
<div class="container"> <div class="bar"> <div class="bar-item pre-active" onclick="changeActive(this)"> <div class="bar-fluid"></div> <div class="drop"></div> <i class="far fa-calendar-alt"></i> </div> <div class="bar-item" onclick="changeActive(this)"> <div class="bar-fluid"></div> <div class="drop"></div> <i class="far fa-sticky-note"></i> </div> <div class="bar-item" onclick="changeActive(this)"> <div class="bar-fluid"></div> <div class="drop"></div> <i class="far fa-bell"></i> </div> <div class="bar-item" onclick="changeActive(this)"> <div class="bar-fluid"></div> <div class="drop"></div> <i class="far fa-address-book"></i> </div> </div> </div>
CSS代码:
* { margin: 0px; padding: 0px; box-sizing: border-box; } .container { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #fc5c65; } .bar { padding: 0px 10px; display: flex; align-items: center; background-color: #ffffff; border-radius: 10px 10px 20px 20px; box-shadow: 3px 3px 0px 0px rgb(235 59 90); } .bar .bar-item { position: relative; overflow: hidden; padding: 20px 25px; cursor: pointer; } .bar .bar-item i { z-index: 1; position: relative; color: #a4b0be; transition: all .3s ease-in-out; } .bar .bar-item.pre-active i { color: #fc5c65; } .bar .bar-item.active i { color: #fc5c65; animation: colour 1s ease-in-out; } .bar .bar-item.active .bar-fluid { position: absolute; top: 0px; left: 0px; background-color: #fc5c65; width: 100%; height: 0px; animation: fluid 1s ease-in-out; } .bar .bar-item.active .bar-fluid:before { content: ''; position: absolute; top: 0px; left: -50%; background-color: #ffffff; width: 110%; height: 400%; border-radius: 50%; } .bar .bar-item.active .bar-fluid:after { content: ''; position: absolute; top: 0px; right: -50%; background-color: #ffffff; width: 110%; height: 400%; border-radius: 50%; } .bar .bar-item.active .drop { position: absolute; top: -2.5px; left: 30.5px; background-color: #fc5c65; width: 2.5px; height: 2.5px; border-radius: 50%; animation: drop 1s ease-in-out; } @keyframes colour { 0% { color: #a4b0be; } 55% { color: #a4b0be; transform: scale(1); } 60% { color: #fc5c65; transform: scale(1); } 70% { transform: scale(1.1); } 80% { transform: scale(1); } } @keyframes fluid { 0% { height: 0px; } 30% { height: 10px; } 100% { height: 0px; } } @keyframes drop { 20% { top: -2.5px; } 50% { top: 21px; } 51% { top: -2.5px; } }
JavaScript代码:
const preactiveItem = document.querySelector('.pre-active') const barItems = document.querySelectorAll('.bar-item') function changeActive (newActive) { preactiveItem.classList.remove('pre-active') barItems.forEach(element => { element.classList.remove('active') }) newActive.classList.add('active') }
看着有点多,没事,自己下去慢慢消化,实在不想消化的就直接做个CV工程师,也不是不可以,哈哈。
使用声明:
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的VIP素材后,只拥有使用权,著作权归原作者及码云笔记网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。
码云笔记 » 前端实现底部tapbar栏代码
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的VIP素材后,只拥有使用权,著作权归原作者及码云笔记网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。
码云笔记 » 前端实现底部tapbar栏代码