tailwind实现汉字笔画书写练习一步一划动画代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：tailwind实现汉字笔画书写练习一步一划动画代码

下面为部分代码预览，完整代码请点击下载或在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 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
  <!-- 引入 Font Awesome -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  <!-- 引入 hanzi-writer.js -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hanzi-writer.min.js"></script>
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4F46E5', // 主色调：靛蓝色
            secondary: '#EC4899', // 辅助色：粉色
            accent: '#10B981', // 强调色：绿色
            neutral: '#1F2937', // 中性色：深灰色
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .writing-container {
        @apply relative w-full max-w-md mx-auto aspect-square bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl;
      }
      .btn-primary {
        @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg active:scale-95 disabled:bg-gray-400 disabled:shadow-none disabled:cursor-not-allowed;
      }
      .btn-secondary {
        @apply bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg active:scale-95 disabled:bg-gray-400 disabled:shadow-none disabled:cursor-not-allowed;
      }
      .btn-accent {
        @apply bg-accent hover:bg-accent/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg active:scale-95 disabled:bg-gray-400 disabled:shadow-none disabled:cursor-not-allowed;
      }
      .btn-neutral {
        @apply bg-neutral hover:bg-neutral/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg active:scale-95 disabled:bg-gray-400 disabled:shadow-none disabled:cursor-not-allowed;
      }
      .btn-outline {
        @apply border-2 border-primary text-primary hover:bg-primary/10 font-medium py-2 px-4 rounded-lg transition-all duration-300 disabled:border-gray-300 disabled:text-gray-400 disabled:bg-transparent disabled:cursor-not-allowed;
      }
      .card {
        @apply bg-white rounded-xl shadow-md p-5 transition-all duration-300 hover:shadow-lg;
      }
      .result-indicator {
        @apply w-4 h-4 rounded-full inline-block transition-all duration-500 bg-gray-300;
      }
      .result-indicator.correct {
        @apply bg-green-500;
      }
      .result-indicator.incorrect {
        @apply bg-red-500;
      }
      .character-grid {
        @apply grid grid-cols-6 gap-2;
      }
      .character-item {
        @apply flex items-center justify-center aspect-square rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer transition-all duration-200 text-xl font-bold;
      }
      .character-item.active {
        @apply bg-primary text-white;
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans">
  <!-- 页面头部 -->
  <header class="bg-gradient-to-r from-primary to-secondary text-white py-8 px-4 shadow-lg">
    <div class="container mx-auto text-center">
      <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-2 tracking-tight">汉字书写练习</h1>
      <p class="text-[clamp(1rem,2vw,1.25rem)] opacity-90 max-w-2xl mx-auto">
        通过交互式练习学习汉字的正确笔画顺序和书写方法
      </p>
    </div>
  </header>

  <!-- 主要内容区 -->
  <main class="container mx-auto px-4 py-8 max-w-6xl">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- 左侧控制面板 -->
      <div class="lg:col-span-1 space-y-6">
        <!-- 汉字选择区 -->
        <div class="card">
          <h2 class="text-xl .........完整代码请登录后点击上方下载按钮下载查看