返回免费在线工具集合

CSS 动画生成器

内置旋转、脉冲、弹跳、闪烁等常用动画,可调时长、缓动与循环方式,预览并复制关键帧代码。

设计 独立定制 输出:网页 免费使用 发布时间: 阅读量:5 作者:马慧
正在加载工具…

没确定键也照跑

西安高新"高新动效组"的祁动,要给后台列表配一个"加载中"的转圈图标,要求是匀速、不停、蓝点。面板上没有"确定"这类按钮,"动画"选"旋转 spin","时长"拨到 1.2,拨完那刻圆点就开始转,读框里的 animation 行也跟着改。六个动作里这次只用了旋转。

动画选「旋转 spin」、时长 1.2

匀速靠线性撑住

"缓动"挑"线性 linear",转起来才不会忽快忽慢;"次数"定"无限循环 infinite",加载圈就不该停。四项凑齐,那行 animation: zabAnim 1.2s linear infinite; 把剧本名、1.2 秒、linear、infinite 一次串起来,逐字对一遍就知道选没选错。缓动共五档、次数共三档,其余组合这次没切。

缓动选「线性 linear」、次数「无限循环 infinite」

关键帧不能落下

复制出去的是三截:注释行给示例标签,.loader 块里 48px 宽高、#2f6bff 蓝底、50% 圆角拼出圆点,@keyframes zabAnim 用 from 的 rotate(0deg) 与 to 的 rotate(360deg) 写满一圈。少了关键帧那段,动画不会动,三段得一起贴进项目。框是只读的,手改不了。

看「复制 CSS」框里的 @keyframes

蓝点转起来再拷

舞台里那个蓝点实测一直在匀速转,跟"旋转 spin"配"线性 linear"再配"无限循环 infinite"的预期对得上。工具往 document.head 塞了 id 为 zab-anim-style 的样式节点,关键帧才跑得起来。祁动看转得稳,点按钮把整段拷走;没有导出入口,也不落盘。

看预览区的动画

企业知识网( www.qiyezhishi.com )提供的结果为参考性内容,不构成法律、税务或投资建议。具体请以主管部门口径与最新法规为准。

本文作者

马慧,企业知识网站长,10年+SEO/GEO经验,精通白帽SEO与网站优化,擅长全网营销与短视频引流,曾打造日均万IP的SEO博客(小小课堂网)、十万IP泛流量资讯网站(错误博客)。自川来熟食连锁店长,5年熟食生产与管理经验,精通抖音本地生活服务运营。