js实现本地svg文件变成svg动画代码
代码语言：html
所属分类：动画
代码描述：js实现本地svg文件变成svg动画代码
代码标签： js 本地 svg 文件 变成 svg 动画 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG 描边动画生成器</title>
<!-- 引入 Tailwind CSS 用于界面美化 -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col">
<!-- 头部 -->
<header class="bg-white border-b border-slate-200 py-4 px-6 shadow-sm">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<h1 class="text-xl font-bold text-slate-900 flex items-center gap-2">
<svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
SVG 描边动画生成器
</h1>
<p class="text-sm text-slate-500">上传静态 SVG 并转换为 CSS 路径绘制动画</p>
</div>
</header>
<!-- 主体内容 -->
<main class="flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- 左侧输入与控制面板 -->
<section class="lg:col-span-5 flex flex-col gap-6">
<!-- SVG 上传与输入区 -->
<div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-4">
<div class="flex justify-between items-center">
<label class="block text-sm font-semibold text-slate-700">1. 上传或输入静态 SVG</label>
<button id="btn-load-demo" class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">加载演示示例</button>
</div>
<!-- 拖拽上传区域 -->
<div id="drop-zone" class="border-2 border-dashed border-slate-300 hover:border-indigo-500 rounded-lg p-6 text-center cursor-pointer transition-colors bg-slate-50">
<input type="file" id="file-input" accept=".svg" class="hidden">
<svg class="mx-auto h-10 w-10 text-slate-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4-4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="mt-2 text-xs text-slate-600">点击选择或将 SVG 文件拖到此处</p>
<p class="text-xs text-slate-400 mt-1">仅支持 .svg 格式</p>
</div>
<!-- 备用文本框（可折叠或直接显示） -->
<details class="group">
<summary class="text-xs text-slate-500 cursor-pointer select-none group-open:text-indigo-600">查看/编辑 SVG 代码</summary>
<textarea id="svg-input" class="w-full h-32 p-3 mt-2 text-xs font-mono border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none resize-y" placeholder="上传后代码会在此处显示，也可以直接粘贴代码"></textarea>
</details>
</div>
<!-- 参数调节区 -->
<div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-4">
<h3 class="text-sm font-semibold text-slate-700 border-b border-slate-100 pb-2">2. 动画参数设置</h3>
<!-- 动画时长 -->
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-xs text-slate-500 mb-1">持续时间 (秒)</label>
<input type="number" id="param-duration" step="0.1" min="0.1" value="2.0" class="w-full p-2 border border-slate-300 rounded-md text-sm">
</div>
<div>
<label class="block text-xs text-slate-500 mb-1">延迟启动 (秒)</label>
<input type="number" id="param-delay" step="0.1" min="0" value="0.0" class="w-full p-2 border border-slate-300 rounded-md text-sm">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0