动画与微交互

旋转太极动画

仅用 CSS 图形绘制并旋转的阴阳太极图。

HTMLCSS动画太极

启用 JavaScript 后可编辑、运行和保存此案例。固定源码如下：

<!doctype html>
<html lang="zh-Hans" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>旋转太极动画</title>
  <style>
    * { box-sizing: border-box; }
    body { min-height: 100vh; margin: 0; display: grid; place-items: center; overflow: hidden; color: #1b1b19; font-family: "STKaiti", "KaiTi", serif; background: #e8e3d7; }
    body::before { content: ""; position: fixed; inset: -20%; background: repeating-radial-gradient(circle at center, transparent 0 55px, rgba(50,46,39,.035) 56px 57px); }
    main { position: relative; z-index: 1; width: min(700px, calc(100% - 40px)); text-align: center; }
    .title { margin-bottom: 30px; }
    .title span { color: #a44231; font: 800 11px/1 "Courier New", monospace; letter-spacing: .28em; }
    h1 { margin: 10px 0 0; font-size: clamp(38px, 8vw, 68px); font-weight: 500; letter-spacing: .15em; }
    .stage { position: relative; width: min(340px, 74vw); aspect-ratio: 1; margin: auto; display: grid; place-items: center; }
    .rings, .rings::before, .rings::after { position: absolute; border: 1px solid rgba(38,35,30,.16); border-radius: 50%; }
    .rings { inset: 0; animation: breathe 4s ease-in-out infinite; }
    .rings::before { content: ""; inset: 22px; }
    .rings::after { content: ""; inset: 44px; }
    .taiji { width: 58%; aspect-ratio: 1; border: 1px solid #1b1b19; border-radius: 50%; background: radial-gradient(circle at 50% 25%, #171715 0 7%, #f7f5ed 7.5% 25%, transparent 25.5%), radial-gradient(circle at 50% 75%, #f7f5ed 0 7%, #171715 7.5% 25%, transparent 25.5%), linear-gradient(90deg, #f7f5ed 50%, #171715 50%); box-shadow: 0 14px 35px rgba(33,29,22,.18); animation: turn 9s linear infinite; }
    .stage:hover .taiji { animation-play-state: paused; }
    .caption { max-width: 440px; margin: 28px auto 0; color: #746d61; font-size: 15px; line-height: 1.8; }
    .seal { position: absolute; right: 4%; bottom: 12%; display: grid; width: 50px; height: 50px; place-items: center; border: 2px solid #a44231; color: #a44231; font-size: 17px; line-height: 1; transform: rotate(5deg); }
    @keyframes turn { to { transform: rotate(1turn); } }
    @keyframes breathe { 50% { transform: scale(.96); opacity: .55; } }
    @media (prefers-reduced-motion: reduce) { .taiji, .rings { animation-play-state: paused; } }
  </style>
</head>
<body>
  <main>
    <header class="title"><span>BALANCE IN MOTION</span><h1>动静相生</h1></header>
    <div class="stage" aria-label="缓慢旋转的太极图"><div class="rings"></div><div class="taiji"></div></div>
    <p class="caption">旋转并非离开中心，而是在变化中重新找到平衡。将鼠标移到太极图上，可以让它暂时停下。</p>
    <div class="seal" aria-hidden="true">和</div>
  </main>
</body>
</html>