47 lines
1.4 KiB
HTML
47 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>anime.js 源码解析</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
background: #0a0a0a; color: #e0e0e0;
|
||
min-height: 100vh; padding: 2rem;
|
||
}
|
||
.container { max-width: 1200px; margin: 0 auto; }
|
||
h1 {
|
||
font-size: 2.5rem; font-weight: 700;
|
||
background: linear-gradient(135deg, #60a5fa, #a78bfa);
|
||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.subtitle { color: #888; font-size: 1.1rem; margin-bottom: 2rem; }
|
||
.card {
|
||
background: #141414; border: 1px solid #222; border-radius: 12px;
|
||
padding: 2rem; margin-bottom: 1.5rem;
|
||
}
|
||
.card h2 { color: #60a5fa; margin-bottom: 1rem; font-size: 1.3rem; }
|
||
.card p { line-height: 1.8; color: #aaa; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>anime.js 源码解析</h1>
|
||
<p class="subtitle">anime.js v4 动画库源码深度拆解（Timeline/Tween/SVG morphing/Stagger）</p>
|
||
|
||
<div class="card">
|
||
<h2>概述</h2>
|
||
<p>待补充研究内容...</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>核心发现</h2>
|
||
<p>待补充...</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|