CSS动画录制器 - 拖拽元素生成关键帧代码
在时间轴上拖拽一个元素的位置和样式,自动录制并生成对应的CSS @keyframes动画代码。
UD5工具箱
快速查找和复制 HTML 特殊字符编码。支持实体名称、十进制编号、十六进制编号,覆盖常用符号、货币、数学、箭头等分类。
| 字符 | 实体名称 | 十进制 | 十六进制 | 描述 | 复制 |
|---|
没有找到匹配的实体,请尝试其他关键词或分类。
HTML 实体(HTML Entities)是一段以 & 开头、以 ; 结尾的特殊文本序列,用于在 HTML 文档中表示那些具有特殊含义的字符或无法直接从键盘输入的字符。
使用实体的主要原因:
< 和 > 会被浏览器识别为标签边界,必须用 < 和 > 替代。& 本身是实体起始符,显示时需写成 &。实体名称(如 &)使用助记英文单词,易于记忆和阅读;实体编号使用 Unicode 码点,分为十进制(&)和十六进制(&)两种形式。
推荐做法:优先使用实体名称,因为代码可读性更好,便于团队协作和维护。但需注意:
每个前端开发者都应该熟记以下最基础的 6 个 HTML 实体:
| 字符 | 实体名称 | 用途 |
|---|---|---|
| & | & | 与符号(实体起始符) |
| < | < | 小于号(标签开始) |
| > | > | 大于号(标签结束) |
| " | " | 双引号 |
| ' | ' | 单引号(HTML5) |
| 非断空格 |
此外,©(©)、®(®)、™(™)、—(—)、–(–)在网页内容中也非常常用。
两者目的完全不同:
<div> 文本。%XX 格式。例如空格编码为 %20。简单记忆:HTML 实体用 &...;,URL 编码用 %...。两者不可混用。
常见的处理方式:
textarea 或 DOMParser 来安全解码 HTML 实体字符串。textContent 设置文本后读取 innerHTML,或使用专门的库如 he(HTML Entities)。{{ }} 插值也会自动转义 HTML 实体,防止 XSS。&、<、>、"、' 这 5 个字符。非断空格(Non-Breaking Space,实体名 ,编号  )是一种特殊的空格字符,它阻止浏览器在该位置自动换行。
常见使用场景:
10 km),避免数字和单位分在两行。Van Gogh),保持姓名完整。 保持间距,但更推荐使用 CSS 控制间距。零宽非连接符(‌,Zero Width Non-Joiner)和零宽连接符(‍,Zero Width Joiner)是不可见的控制字符,用于影响文字的连字和渲染行为:
这些实体在网页国际化(i18n)和复杂文字排版中非常有用。
HTML5 大幅扩展了命名实体的数量(从 HTML4 的约 250 个增加到约 2200 个),主要新增包括:
∀(∀)、∂(∂)、∃(∃)、∅(∅)等。←(←)、↑(↑)、→(→)、↓(↓)、↔(↔)等大量箭头。∠(∠)、∧(∧)、∨(∨)、∩(∩)、∪(∪)等。♠(♠)、♣(♣)、♥(♥)、♦(♦)。这些新增实体让开发者无需记忆 Unicode 码点即可使用大量特殊符号。
在时间轴上拖拽一个元素的位置和样式,自动录制并生成对应的CSS @keyframes动画代码。
在时间轴上拖拽添加属性关键帧,实时预览动画并生成 @keyframes 代码。
预置多种常见表单(登录、联系、搜索)的HTML代码,点击即可复制并稍作修改。
输入代码并自动去除无意义空格,统计有效字符数,用于Code Golf比赛。
解析标准Cron表达式,显示未来多次执行的具体日期时间,辅助验证定时任务配置。
将HTML代码转换为兼容React JSX的代码(class→className,style→对象等)。
拖拽文本框、下拉框、单选复选等元素,排列组成表单,导出整洁的HTML表单结构代码。
输入一串字母,从内置词典搜索所有可组成的有效英文单词,按长度排序。
从眉毛、眼睛、嘴巴等部件中拖拽组合,生成独一无二的日式颜文字表情,一键复制。
待办项拖入四象限,并设置每个的提醒时间,自动排序今日。
输入一个单词,自动生成所有可能的变位词组合,并可选择验证是否为词典单词。
粘贴剪贴板中的数字,立刻生成对应的一维条形码图片。
向任意输入URL发送请求,清晰显示响应状态码、头信息和体,类似轻量级Postman。
配置下划线从中间或一侧滑出的动画,生成无限菜单效果代码。
配置不同的下划线出现、消失动画(从中间、左侧等),生成链接美化CSS。
随机给出整数,在输入框中填写其全部质因数分解式,验证数学熟练度。
将普通CSS代码转换为Styled Components的模板字符串格式。
在散点图上拖拽数据点,实时更新最小二乘回归线,显示斜率和截距。
提供一份涵盖性能、安全、备份、监控等上线前检查清单,可自定义勾选。
输入最小视口和最大视口下的字号,生成利用clamp()的流畅缩放字体规则。
输入常见的报错片段,基于静态库返回常见的解释和可能的修复方案。
粘贴代码自动进行语法高亮显示,支持主流编程语言,生成带行号的HTML代码块,方便嵌入博客。
在页面上叠加可调节的基线网格,可视化检查文字是否对齐基线,实现精确排版。
为每个字符添加Unicode删除线组合符号,生成带删除线的纯文本,适用于格式化受限场景。
并排展示ease、ease-in、ease-out等不同CSS缓动函数的动画速率差异,辅助选择合适曲线。
通过注册CSS属性的类型和初始值,演示如何让渐变等属性实现平滑动画。
对简单混淆的JS进行格式化,并尝试将短变量名替换为更具描述性的名称,提高可读性。
在单页内模拟MPA过渡效果,自定义进场/出场动画,体验View Transitions API丝滑切换。
选择标题和正文的网络字体或系统字体,即时预览搭配效果。
使用Service Worker拦截fetch请求,并返回用户自定义的JSON模拟数据,用于前端独立开发。