gifuct+gif实现gif动画帧解析可视化编辑拖拽换位导出动画代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gifuct+gif实现gif动画帧解析可视化编辑拖拽换位导出动画代码，gifuct负责解析gif动画一个个帧图片，gif插件负责将编辑后的多个帧图片导出新的gif动画。

代码标签： gifuct gif gif 动画帧解析可视化编辑拖拽换位导出动画代码

下面为部分代码预览，完整代码请点击下载或在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>GIF动画帧编辑器</title>
    <style>

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; min-height: 100vh; }
        .container { max-width: 1400px; margin: 0 auto; background: white; border-radius: 20px; padding: 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
        h1 { text-align: center; color: #333; margin-bottom: 30px; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); }
        .upload-section { text-align: center; margin-bottom: 30px; padding: 40px; border: 3px dashed #667eea; border-radius: 15px; background: #f8f9ff; transition: all 0.3s; }
        .upload-section:hover { border-color: #764ba2; background: #f0f1ff; }
        .upload-btn { display: inline-block; padding: 15px 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 50px; cursor: pointer; font-size: 16px; font-weight: bold; transition: transform 0.2s; }
        .upload-btn:hover { transform: scale(1.05); }
        input[type="file"] { display: none; }
        .controls { display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; justify-content: center; }
        .btn { padding: 12px 25px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: bold; transition: all 0.3s; color: white; }
        .btn-primary { background: #667eea; }
        .btn-success { background: #10b981; }
        .btn-danger { background: #ef4444; }
        .btn-warning { background: #f59e0b; }
        .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
        .preview-section { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
        .original-preview, .new-preview { text-align: center; }
        .preview-title { font-size: 18px; font-weight: bold; margin-bottom: 15px; color: #333; }
        canvas { border: 2px solid #ddd; border-radius: 10px; max-width: 100%; height: auto; background: #f9f9f9; }
        .frames-container { background: #f9f9f9; padding: 20px; border-radius: 15px; margin-bottom: 30px; }
        .frames-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
        .frame-item { position: relative; border: 3px solid #ddd; border-radius: 10px; padding: 10px; background: white; cursor: move; transition: all 0.3s; }
        .frame-item:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.15); }
        .frame-item.selected { border-color: #667eea; box-shadow: 0 0 20px rgba(102, 126, 234, 0.5); }
        .frame-item.dragging { opacity: 0.4; transform: scale(1.05); }
        .frame-item.drag-over { border-style: dashed; border-color: #764ba2; }
        .frame-canvas { width: 100%; border-radius: 5px; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; }
        .frame-number { text-align: center; margin-top: 8px; font-weight: bold; color: #666; font-size: 12px; }
        .frame-delay { text-align: center; margin-top: 5px; }
        .frame-delay input { width: 60px; padding: 4px; border: 1px solid #ddd; border-radius: 4px; text-align: center; }
        .frame-actions { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
        .frame-btn { padding: 5px 10px; font-size: 12px; border: none; border-radius: 5px; cursor: pointer; transition: all 0.2s; }
        .frame-btn-delete { background: #ef4444; color: white; }
        .frame-btn-duplicate { background: #10b981; color: white; }
        .frame-btn:hover { transform: scale(1.1); }
        .settings { background: #f9f9f9; padding: 20px; border-radius: 15px; margin-bottom: 20px; display: flex; align-items: center; justify-content: ce.........完整代码请登录后点击上方下载按钮下载查看