技术栈

使用lottie.js播放json动画文件

忠实米线2026-01-22 8:30
html 复制代码
	<div id="lottie-container" style="height: 200px;"></div>
	<script>
	lottie.loadAnimation({
			container: document.getElementById('lottie-container'), // DOM 容器
			renderer: 'canvas',           // 渲染方式:'svg' / 'canvas' / 'html'
			loop: true,                // 是否循环
			autoplay: true,            // 是否自动播放
			path: '/1.json' // JSON 文件路径
		});
</script>
上一篇:CSS 新特性总结(附:var() 函数详解)
下一篇:ROS Noetic 与 Ubuntu 24.04
相关推荐
前端Hardy
1 天前
面试官:JS数组的常用方法有哪些?这篇总结让你面试稳了!
javascript·面试
yuki_uix
1 天前
Props、Context、EventBus、状态管理:组件通信方案选择指南
前端·javascript·react.js
全栈老石
1 天前
手写无限画布4 —— 从视觉图元到元数据对象
前端·javascript·canvas
Leon
1 天前
新手引导 intro.js 的使用
前端·javascript·vue.js
牛奶
1 天前
JS随笔:浏览器 API(DOM 与 BOM)
前端·javascript·面试
牛奶
1 天前
JS随笔:异步编程与事件循环
前端·javascript·面试
牛奶
1 天前
JS随笔:数据结构与集合
前端·javascript·面试
小陆猿
1 天前
股票实时行情Echarts动态图表
前端·javascript
牛奶
1 天前
JS随笔:ES6+特性与模块化实践
前端·javascript
牛奶
1 天前
JS随笔:基础语法与控制结构
前端·javascript
热门推荐
01GitHub 镜像站点02【OpenClaw 本地实战 Ep.3】突破瓶颈:强制修改 openclaw.json 解锁 32k 上下文记忆03OpenClaw 使用和管理 MCP 完全指南04Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services05AI 规范驱动开发“三剑客”深度对比:Spec-Kit、Kiro 与 OpenSpec 实战指南06Clawdbot部署教程:解决‘gateway token missing’授权问题的完整步骤07OpenClaw + 飞书(Feishu)环境搭建指南08Window 10部署openclaw报错node.exe : npm error code 12809AI Agent 平台横评:ZeroClaw vs OpenClaw vs Nanobot10本地部署 OpenClaw + DeepSeek-R1 完全指南