js+css实现儿童汉字书法练习教学代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现儿童汉字书法练习教学代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>小小书法家 · 儿童汉字练字帖</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --paper:#FFF6E3; --ink:#33261B; --red:#E4432E; --red-d:#B92D1B;
  --pink-line:#F2BDB4; --green:#2FA463; --gold:#FFB020; --blue:#2B6CB0;
  --panel:#FFFDF8; --soft:#F7EBD3;
}
html,body{min-height:100%}
body{
  font-family:'Noto Sans SC',sans-serif;color:var(--ink);font-size:15px;
  background:var(--paper);
  background-image:
    linear-gradient(rgba(228,67,46,.055) 1.5px,transparent 1.5px),
    linear-gradient(90deg,rgba(228,67,46,.055) 1.5px,transparent 1.5px);
  background-size:30px 30px;
  overflow-x:hidden;user-select:none;
}
/* ---------- 漂浮小涂鸦 ---------- */
.doodles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.doodles span{position:absolute;font-size:34px;opacity:.32;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(8deg)}}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:20px 22px 10px}
/* ---------- 顶部 ---------- */
header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:6px 4px 20px}
.brand{position:relative;padding-right:76px}
.tag{display:inline-block;font-family:'ZCOOL KuaiLe';background:var(--green);color:#fff;padding:3px 14px;border-radius:999px;border:2.5px solid var(--ink);font-size:14px;letter-spacing:2px;transform:rotate(-2deg);box-shadow:2px 3px 0 rgba(51,38,27,.2)}
h1{font-family:'ZCOOL KuaiLe';font-size:clamp(36px,5vw,56px);line-height:1.15;margin-top:8px;letter-spacing:2px;font-weight:400}
h1 .accent{color:var(--red);display:inline-block;transform:rotate(-5deg)}
h1 .squig{text-decoration:underline wavy var(--gold);text-decoration-thickness:3px;text-underline-offset:7px}
.brand p{margin-top:6px;color:#7A6A55;font-size:14.5px;letter-spacing:1px}
.seal{position:absolute;right:4px;top:16px;width:54px;height:54px;background:var(--red);color:#fff;font-family:'Ma Shan Zheng';font-size:36px;display:grid;place-items:center;border-radius:10px;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.85),3px 4px 0 rgba(51,38,27,.18);animation:sealBob 5s ease-in-out infinite}
@keyframes sealBob{0%,100%{transform:rotate(8deg)}50%{transform:rotate(2deg) translateY(-3px)}}
.stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;box-shadow:0 3px 0 rgba(51,38,27,.15);display:flex;gap:6px;align-items:center}
.chip b{color:var(--red);font-size:17px}
.lvl-progress{min-width:190px}
.lvl-progress .bar{height:15px;background:#fff;border:2.5px solid var(--ink);border-radius:99px;overflow:hidden}
.lvl-progress .fill{height:100%;width:0%;background:repeating-linear-gradient(45deg,var(--green) 0 8px,#3BB878 8px 16px);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.lvl-progress small{display:block;text-align:right;font-size:12px;color:#7A6A55;margin-top:3px}
/* ---------- 主体三栏 ---------- */
main{display:grid;grid-template-columns:252px 1fr 300px;gap:20px;align-items:start}
.panel{background:var(--panel);border:3px solid var(--ink);border-radius:20px;box-shadow:7px 7px 0 rgba(51,38,27,.12)}
.panel-title{font-family:'ZCOOL KuaiLe';font-size:19px;letter-spacing:2px;display:flex;align-items:center;gap:8px;margin-bottom:10px}
/* 选字帖 */
.picker{padding:14px}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tab{f.........完整代码请登录后点击上方下载按钮下载查看