悬停代码小瀑布按钮
适用于科技感的网站中，此按钮有助于增加网站的科技感效果。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
知识点：
1️⃣ transition 过渡属性
2️⃣ animation 动画属性
3️⃣ :nth-child(n) 和 :hover 选择器
4️⃣ -- 自定义属性（css变量）以及 var(...) 引用自定义属性值函数和 calc(...) 计算属性值函数
思路：基于上一例代码瀑布加载动画，实现鼠标悬浮在按钮上方时，显示出其代码瀑布动画。
核心代码
html 代码
<div class="btn-box80"> <button class="btn80">HOVER</button><div class="loading80"><p class="p80">4rs<span class="i80-1">b</span>h<span class="i80">k</span>r</p><p class="p80">_7u<span class="i80">i</span>90<span class="i80">@</span>v</p><p class="p80">_7,=<span class="i80-1">j</span>ud<span class="i80">i</span>y</p><p class="p80">d8<span class="i80-1">%</span>rg</p><p class="p80"><span class="i80">d</span>oopd<span class="i80-1">e</span>g</p><p class="p80">c4*<span class="i80-1">h</span>ld</p><p class="p80">u<span class="i80">g</span>_^43<span class="i80">2</span>iu</p></div></div>
按钮开关主体代码结构。
CSS部分代码
.btn-box80{width:124px;height:46px;position: relative;display: flex;justify-content: center;align-items: center;cursor: pointer;--color-f:#43ff85;--color-s:#6c72fe;--color-t:#f7e543;}.btn80{width:124px;height:46px;font-size:20px;font-weight: bold;letter-spacing:4px;outline: none;background-color: transparent;border:2px solid var(--color-f);color:var(--color-f);position: absolute;padding:0;cursor: pointer;z-index:1;transition: all 0.24s linear;}.loading80{width:124px;height:46px;font-size:24px;font-weight: bold;letter-spacing:4px;background-color: transparent;position: absolute;left:-2px;overflow: hidden;cursor: pointer;z-index:0;opacity:0;transition: opacity 0.24s linear;}.p80{cursor: pointer;writing-mode: vertical-rl;letter-spacing:3px;font-size:12px;line-height:1;margin:0;padding:0;position: absolute;color:var(--color-f);--left:3px;--delay:0.1s;animation: eff80 0.6s linear infinite;}.i80{color:var(--color-s);}.i80-1{color:var(--color-t);}.p80:nth-child(1){left:var(--left);}.p80:nth-child(2){left:calc(var(--left)+18px);animation-delay:var(--delay);}.p80:nth-child(3){left:calc(var(--left)+18px*2);animation-delay:calc(var(--delay)*2);}.p80:nth-child(4){left:calc(var(--left)+18px*3);}.p80:nth-child(5){left:calc(var(--left)+18px*4);animation-delay:calc(var(--delay)*4);}.p80:nth-child(6){left:calc(var(--left)+18px*5);animation-delay:calc(var(--delay)*3);}.p80:nth-child(7){left:calc(var(--left)+18px*6);}@keyframes eff80{0%{transform:translateY(-40%);}100%{transform:translateY(140%);}}.btn-box80:hover.btn80{text-shadow:02px0var(--color-s);box-shadow:2px2px0var(--color-s),-2px-2px0var(--color-t);}.btn-box80:hover.loading80{opacity:1;background-color:#000000;}
这里在上一例的基础上，增加了按钮样式，利用 :hover 来显示隐藏代码瀑布动画。
完整代码
html页面
<!DOCTYPE html><html lang="zh"><head><meta charset="utf-8">
<title>悬停代码小瀑布按钮</title>
<style>
.app{width:100%;height:100vh;background-color:#ffffff;position: relative;display: flex;justify-content: center;align-items: center;}.btn-box80{width:124px;height:46px;position: relative;display: flex;justify-content: center;align-items: center;cursor: pointer;--color-f:#43ff85;--color-s:#6c72fe;--color-t:#f7e543;}.btn80{width:124px;height:46px;font-size:20px;font-weight: bold;letter-spacing:4px;outline: none;background-color: transparent;border:2px solid var(--color-f);color:var(--color-f);position: absolute;padding:0;cursor: pointer;z-index:1;transition: all 0.24s linear;}.loading80{width:124px;height:46px;font-size:24px;font-weight: bold;letter-spacing:4px;background-color: transparent;position: absolute;left:-2px;overflow: hidden;cursor: pointer;z-index:0;opacity:0;transition: opacity 0.24s linear;}.p80{cursor: pointer;writing-mode: vertical-rl;letter-spacing:3px;font-size:12px;line-height:1;margin:0;padding:0;position: absolute;color:var(--color-f);--left:3px;--delay:0.1s;animation: eff80 0.6s linear infinite;}.i80{color:var(--color-s);}.i80-1{color:var(--color-t);}.p80:nth-child(1){left:var(--left);}.p80:nth-child(2){left:calc(var(--left)+18px);animation-delay:var(--delay);}.p80:nth-child(3){left:calc(var(--left)+18px*2);animation-delay:calc(var(--delay)*2);}.p80:nth-child(4){left:calc(var(--left)+18px*3);}.p80:nth-child(5){left:calc(var(--left)+18px*4);animation-delay:calc(var(--delay)*4);}.p80:nth-child(6){left:calc(var(--left)+18px*5);animation-delay:calc(var(--delay)*3);}.p80:nth-child(7){left:calc(var(--left)+18px*6);}@keyframes eff80{0%{transform:translateY(-40%);}100%{transform:translateY(140%);}}.btn-box80:hover.btn80{text-shadow:02px0var(--color-s);box-shadow:2px2px0var(--color-s),-2px-2px0var(--color-t);}.btn-box80:hover.loading80{opacity:1;background-color:#000000;}
</style>
</head>
<body><div class="app"><div class="btn-box80"><button class="btn80">HOVER</button><div class="loading80"><p class="p80">4rs<span class="i80-1">b</span>h<span class="i80">k</span>r</p><p class="p80">_7u<span class="i80">i</span>90<span class="i80">@</span>v</p><p class="p80">_7,=<span class="i80-1">j</span>ud<span class="i80">i</span>y</p><p class="p80">d8<span class="i80-1">%</span>rg</p><p class="p80"><span class="i80">d</span>oopd<span class="i80-1">e</span>g</p><p class="p80">c4*<span class="i80-1">h</span>ld</p><p class="p80">u<span class="i80">g</span>_^43<span class="i80">2</span>iu</p></div></div></div></body></html>
以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。
关注公众号：拾黑（shiheibook）了解更多
赞助链接：
关注数据与安全，洞悉企业级服务市场：https://www.ijiandao.com/
四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
让资讯触达的更精准有趣：https://www.0xu.cn/
关注网络尖刀微信公众号随时掌握互联网精彩
- Telegram惊现公开群组聊天索引机器人 抓取8.6亿名用户的560亿条发言记录
- 多邻国猫头鹰有望复活：需要全球用户共同支援！
- PaoPao-CE清新文艺的微社区
- 卢布汇率人民币2024年9月9日
- 工信部等三部门：加快5G全连接工厂建设
- Q2全球蜂窝物联网模组出货量同比增长20% 中国厂商包揽前六
- 马斯克在推特回应推特起诉：真讽刺，我笑了
- QQ音乐“史诗级”功能：iPhone又有新玩法了
- 360搜索被罚200万元；三部门要求互联网平台全面自查；字节跳动将开启员工期权兑换，价格为126美元/股 | Do晚报
- HomePod 停产；奔驰在中国召回 260 万辆汽车；微信安全团队发布个人账号专项治理公告｜Do早报
- 中国工程院院士屠海令：大力发展智能传感材料与器件丨我为“十四五”建言
- 肖亚庆在北京航空航天大学调研强调：深入学习贯彻党的十九届五中全会精神 培养支撑国家产业技术创新的合格建设者和可靠接班人
微信扫码关注公众号