js+css实现srt字幕文件交叉旋转文字动画视频下载本地代码-html代码-BFW代码库

js+css实现srt字幕文件交叉旋转文字动画视频下载本地代码

代码语言：html

所属分类：动画

代码描述：js+css实现srt字幕文件交叉旋转文字动画视频下载本地代码

下面为部分代码预览，完整代码请点击下载或在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>文字旋转视频生成器</title>
    <!-- Tailwind CSS 用于现代化 UI 快速排版 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 针对 9:16 Canvas 容器的自定义样式 */
        .canvas-container {
            aspect-ratio: 9 / 16;
            max-height: 65vh;
        }
        /* 自定义全局与字幕列表滚动条样式 */
        #subtitlesList::-webkit-scrollbar,
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        #subtitlesList::-webkit-scrollbar-track,
        ::-webkit-scrollbar-track {
            background: #18181c;
        }
        #subtitlesList::-webkit-scrollbar-thumb,
        ::-webkit-scrollbar-thumb {
            background: #3f3f46;
            border-radius: 3px;
        }
        #subtitlesList::-webkit-scrollbar-thumb:hover,
        ::-webkit-scrollbar-thumb:hover {
            background: #52525b;
        }
    </style>
</head>
<body class="bg-[#121214] text-gray-100 font-sans min-h-screen flex flex-col">

    <!-- 顶部导航 -->
    <header class="border-b border-zinc-800 bg-[#18181c] px-6 py-4 flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <span class="text-2xl">🎬</span>
            <h1 class="text-lg font-bold tracking-wider text-zinc-100">旋转文字字幕视频生成器</h1>
        </div>
        <div class="flex items-center space-x-3">
            <button id="loadDemoBtn" class="px-4 py-1.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm rounded transition-all">
                加载测试 Demo 
            </button>
        </div>
    </header>

    <!-- 主工作区 -->
    <main class="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-6 p-6 overflow-hidden">
        
        <!-- 左侧：控制面板与参数设置 -->
        <section class="lg:col-span-4 flex flex-col space-y-5 bg-[#18181c] p-5 rounded-xl border border-zinc-800">
            <div>
                <h2 class="text-sm font-semibold uppercase tracking-wider text-zinc-400 mb-3">1. 导入素材</h2>
                
                <!-- SRT 导入 -->
                <div class="mb-4">
                    <label class="block text-xs text-zinc-500 mb-1.5 font-medium">SRT 字幕文件 (.srt)</label>
                    <input type="file" id="srtFileInput" accept=".srt" class="block w-full text-xs text-zinc-400
                        file:mr-4 file:py-1.5 file:px-3
                        file:rounded file:border-0
                        file:text-xs file:font-semibold
                        file:bg-indigo-600 file:text-white
                        hover:file:bg-indigo-700
                        cursor-pointer bg-zinc-900 border border-zinc-800 rounded p-1" />
                </div>

                <!-- 音频导入 -->
                <div>
                    <label class="block text-xs text-zinc-500 mb-1.5 font-medium">配音/背景音乐 (可选)</label>
                    <input type="file" id="audioFileInput" accept="audio/*" class=&qu.........完整代码请登录后点击上方下载按钮下载查看