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

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

代码语言：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-mediu.........完整代码请登录后点击上方下载按钮下载查看