你的水龙头不够花哨，试试这个！

时间：2023-03-27 10:42:02 JavaScript

作者：romaopedro199译者：前端小智来源：dev有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。今天来做一个花哨的Tap吧，先来看看最终效果吧：然后，敲代码！HTML

在HTML代码中，“bar”类是点击栏的容器，“bar-item”类是触发动画的按钮。现在遵循代码CSS。CSS*{边距：0px；填充：0px；box-sizing:border-box;}.??container{width:100%;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；背景颜色：#fc5c65;}.bar{填充：0px10px;显示：弹性；对齐项目：居中；背景色：#ffffff；边框半径：10px10px20px20px；box-shadow:3px3px0px0pxrgb(2355990);}.bar.bar-item{位置：相对;溢出：隐藏；填充：20px25px；cursor:pointer;}.bar.bar-itemi{z-index:1;位置：相对；颜色：#a4b0be；过渡：所有.3s缓入缓出；}.bar.bar-item.pre-activei{color:#fc5c65;}.bar.bar-item.activei{color:#fc5c65;动画：颜色1s缓入缓出；}.bar.bar-item.active.bar-fluid{position:absolute;顶部：0px；左：0px；背景色：#fc5c65；宽度：100%；高度：0px；动画：流体1s缓入缓出；}.bar.bar-item.active.bar-fluid:before{content:'';位置：绝对；顶部：0px；左边：-50%；背景色：#ffffff；宽度：110%；高度：400%；border-radius:50%;}.bar.bar-item.active.bar-fluid:after{content:'';位置：绝对；顶部：0px；右：-50%；背景色：#ffffff；宽度：110%；高度：400%；border-radius:50%;}.bar.bar-item.active.drop{position:absolute;顶部：-2.5px；左：30.5px；背景色：#fc5c65；宽度：2.5px；高度：2.5px；边界半径：50%；animation:drop1sease-in-out;}@keyframescolor{0%{color:#a4b0be;}55%{颜色：#a4b0be；变换：规模（1）；}60%{颜色：#fc5c65；变换：规模（1）；}70%{变换：比例（1.1）；}80%{变换：比例（1）；}}@keyframesfluid{0%{高度：0px；}30%{高度：10px；}100%{高度：0px；}}@keyframesdrop{20%{top:-2.5px;}50%{顶部：21px；}51%{顶部：-2.5px；}}自己慢慢消化，不想消化直接做一个CV工程师JavaScript在线案例https://codepen.io/romaopedro...代码部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便在这里给大家推荐一款好用的BUG监控工具Fundebug。原文：https://dev.to/romaopedro199/...交流有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。

上一篇：Ajax学习笔记

下一篇：SAPUI5应用开发教程60-SAPUI5地图控件部分高级用法试用版

你的水龙头不够花哨，试试这个！相关文章