<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>90x28圆角矩形蛇段动画</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>body { background:#fff; display:flex; align-items:center; justify-content:center; height:100vh; }.box { width:90px; height:28px; position:relative; }svg { width:100%; height:100%; display:block; }.bg { fill:none; stroke:#fff; stroke-width:1; }.snake {fill:none;stroke:#2B59FF;stroke-width:1;stroke-linecap:round;}
</style>
</head>
<body><div class="box"><div>文章</div><svg viewBox="0 0 90 28"><!-- 背景边框 --><rect x="1.5" y="1.5" width="87" height="25" rx="14" ry="14" class="bg"/><!-- 贪吃蛇段 --><rect id="snakeRect" x="1.5" y="1.5" width="87" height="25" rx="14" ry="14" class="snake"/></svg></div><script>
$(function(){var rect = document.getElementById("snakeRect");var len = rect.getTotalLength(); // 周长var seg = 30; // 蛇的长度 (像素)var gap = len - seg; // 空白长度// 设置 dasharray 只留一小段$(rect).css({'stroke-dasharray': seg + " " + gap,'stroke-dashoffset': 0});// 动态生成 keyframesvar animName = "snakeMove_" + Math.floor(Math.random()*1e6);var keyframes = `@keyframes ${animName} {from { stroke-dashoffset: 0; }to { stroke-dashoffset: -${len}px; }}`;$('<style>').text(keyframes).appendTo('head');// 应用动画$(rect).css({'animation': `${animName} 2s linear infinite`});
});
</script>
</body>
</html>
css样式：button边框贪吃蛇加载效果
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/909419.shtml
如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！相关文章
什么是NIC（网络接口卡）？
网络接口卡（NIC）是一种基本的硬件组件，它使计算机或设备能够连接到网络。它可以集成到主板中，也可以作为扩展卡安装在计算机上，这标志着它在计算机网络中不可或缺的作用。
NIC管理网络和计算机之间的数据转换和…
视频剪辑效率翻倍！CyberLink PowerDirector 从入门到专业的全能解决方案
对于视频编辑爱好者、自媒体创作者以及初入行业的剪辑新人而言，一款功能全面且操作友好的剪辑工具，是提升创作效率与作品质感的关键。CyberLink PowerDirector（威力导演）作为一款综合性视频剪辑软件，既具备满足专…
20250415_信安一把梭_encode
流量分析, 应急响应, tcp, 数据解析, pyshark, 正则匹配, json, 信安一把梭Tags:流量分析, 应急响应, 数据解析, tcp, pyshark, 正则匹配, json, 信安一把梭
0x00. 题目
请分析某设备导出的流量包，找到攻击IP和正确密…
每天一个安卓测试开发小知识之 （六）---常用的adb 命令第四期
每天一个安卓测试开发小知识之 （六）---常用的adb 命令第四期本期继续介绍adb命令root adb
查看app进程id
adb服务端重启
获取当前界面的xml
adb命令输入text1. root adbroot的作用是什么 如何进入root 如何退出 什么…
SAP-ABAP中STOP,EXIT,CHECK,RETURN,CONTINUE,LEAVE,REJECT的区别
Stop 命令使用该命令的程序位置INITIALIZATION, AT SELECTION-SCREEN, START-OF-SELECTION和GET 事件中处理说明1、 当在INITIALIZATION事件执行该命令，系统将直接触发应用服务器和客户端屏幕元素的发送；影响后续模块…
Arduino ide 软件 不建议大家使用 缺点多多
任何一个产品 ，不说缺点的 ，都是有问题的。
Arduino ide 自带的 下载开发板 安装包 和库 安装包 几乎都会失败！很慢 时间很长
Apifox调试报错信息
Apifox调试报错信息invalid character - in numeric literal错误
解决：在body如下设置
、
400 报错
解析请求参数发生错误 - invalid character n looking for beginning of object key string
视频融合平台EasyCVR国标GB28181视频诊断功能详解与实践
视频融合平台EasyCVR国标GB28181视频诊断功能详解与实践一、引言：海量摄像头下的运维困境
在智慧城市、智慧园区、大型连锁等场景中，动辄接入成百上千路GB28181监控摄像头。传统的运维方式高度依赖人工7x24小时盯屏，…
Refit Consul
类似于 Refit 的 HTTP 客户端库
这些库通常都基于 HttpClient，并提供了一种声明式或更简洁的方式来定义和调用 RESTful API。库名
描述
特点Flurl.Http
简洁、流畅的 HTTP 客户端库，支持流式 API。
语法简洁，链式调…
故障处理：Oracle 19.20未知BUG导致oraagent进程内存泄漏的案例处理
我们的文章会在微信公众号IT民工的龙马人生和博客网站( www.htz.pw )同步更新 ，欢迎关注收藏，也欢迎大家转载，但是请在文章开始地方标注文章出处，谢谢！
由于博客中有大量代码，通过页面浏览效果更佳。今天朋友在做…
麒麟服务器操作系统查询可用的内核版本以及安装和降级命令
1.查询当前安装的内核版本：dnf list installed kernel
2.卸载可选的内核版本： rpm -qa|grep 52.49 |xargs yum autoremove -y
因为dnf remove和yum remove都卸载不完整
3.查询所有可用的内核版本：dnf list --show…
esp32 stm32 ros2 三者区别
ESP32、STM32是两种不同的微控制器（MCU），而ROS 2是一个机器人操作系统，ESP32侧重于集成Wi-Fi和蓝牙的物联网应用，STM32擅长高性能工业和汽车控制，而ROS 2则是一个运行在这些硬件上的软件框架，用于开发复杂的机器…
20250406_信安一把梭_测试篇
流量分析, 应急响应, http, 信安一把梭Tags:流量分析, 应急响应, http, 信安一把梭
0x00. 题目
某天晚上安服仔小辉辉上班摸鱼期间突然发现服务器登入页面被挤掉线了，于是第六感告诉他，服务器肯定是被黑客攻击了，于…
3123004806软件工程查重项目
3123004806软件工程查重项目3123004806软件工程个人项目这个作业属于哪个课程
<https://edu.cnblogs.com/campus/gdgy/SoftwareEngineering2024>这个作业要求在哪里
https://edu.cnblogs.com/campus/gdgy/Class3…
DeepSeek大模型混合专家模型，DeepSeekMoE 重构 MoE 训练逻辑 - 教程
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …
前端 10 个 JS 神 API，开箱即用
1 Page Visibility API —— 页面“隐身”探测 常用场景： 用户切标签页时暂停视频、停止轮询document.addEventListener(visibilitychange, () => {document.visibilityState === hidden? video.pause(): video.p…
故障处理：清除 DBA_DATAPUMP_JOBS 视图中的异常数据泵作业
故障处理：清除 DBA_DATAPUMP_JOBS 视图中的异常数据泵作业我们的文章会在微信公众号IT民工的龙马人生和博客网站( www.htz.pw )同步更新 ，欢迎关注收藏，也欢迎大家转载，但是请在文章开始地方标注文章出处，谢谢！
…
Web自动化测试智能体详解
自然语言驱动Web自动化，让测试更智能、更高效
本次Web 自动化测试智能体课程将带您探索如何利用自然语言驱动 Web 自动化测试，显著提升测试效率与智能化水平。
课程亮点
本公开课将聚焦以下核心内容：
Web 常见自动化…