作者：romaopedro199
译者：前端小智
起源：dev
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
明天，咱们来做一个花里胡哨 Tap bar ，先来看下最终成果：
接着，就把代码码起来了！
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>在HTML代码中，"bar" 类是点击栏的容器，"bar-item"类是触发动画的按钮。当初接着码 CSS。
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; }}本人缓缓消化，不想消化间接做个CV工程师。
JavaScript
线上事例
https://codepen.io/romaopedro...
代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
原文：https://dev.to/romaopedro199/...
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。