
思考两分半,屁都没放一个。。。
应试痕迹太明显了吧
终于出来了。。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ox-alpha · 大象跷跷板</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background: #f4f7fb;
font-family: ui-rounded, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
header { padding: 26px 0 6px; text-align: center; }
h1 {
margin: 0;
font-size: clamp(2rem, 5vw, 3rem);
letter-spacing: .14em;
font-weight: 800;
background: linear-gradient(90deg, #5b8def, #9b5be0, #ef5b9a);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
main { width: 100%; display: flex; justify-content: center; padding: 10px 16px 36px; }
svg {
width: min(920px, 96vw);
height: auto;
border-radius: 18px;
box-shadow: 0 12px 32px rgba(30, 50, 90, .15);
}
/* 跷跷板整体摇摆(绕支点旋转) */
.seesaw {
transform-origin: 400px 337px;
animation: rock 3.2s ease-in-out infinite;
}
@keyframes rock {
0%, 100% { transform: rotate(-6deg); }
50% { transform: rotate(6deg); }
}
/* 象鼻子摆动 */
.trunk {
transform-origin: 333px 249px;
animation: sway 2.6s ease-in-out infinite;
}
@keyframes sway {
0%, 100% { transform: rotate(-6deg); }
50% { transform: rotate(8deg); }
}
/* 耳朵扇动 */
.ear {
transform-origin: 294px 244px;
animation: flap 2.6s ease-in-out infinite;
}
@keyframes flap {
0%, 100% { transform: rotate(-4deg); }
50% { transform: rotate(5deg); }
}
/* 尾巴摇摆 */
.tail {
transform-origin: 190px 258px;
animation: wag 2.2s ease-in-out infinite;
}
@keyframes wag {
0%, 100% { transform: rotate(-8deg); }
50% { transform: rotate(10deg); }
}
/* 云朵飘动 */
.cloud1 { animation: drift 32s linear infinite; }
.cloud2 { animation: drift 46s linear infinite; animation-delay: -22s; }
@keyframes drift {
from { transform: translateX(-200px); }
to { transform: translateX(900px); }
}
/* 太阳呼吸 */
.sun {
transform-origin: 700px 80px;
animation: pulse 4s ease-in-out infinite alternate;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.seesaw, .trunk, .ear, .tail, .cloud1, .cloud2, .sun { animation: none; }
}
</style>
</head>
<body>
<header><h1>ox-alpha</h1></header>
<main>
<svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="大象踩跷跷板动画">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#bfe3ff"/>
<stop offset="1" stop-color="#eef8ff"/>
</linearGradient>
<linearGradient id="grass" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#7cb85c"/>
<stop offset="1" stop-color="#579a41"/>
</linearGradient>
<linearGradient id="wood" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#c98a4b"/>
<stop offset="1" stop-color="#a96a32"/>
</linearGradient>
<linearGradient id="leg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#aab4bd"/>
<stop offset="1" stop-color="#8b97a1"/>
</linearGradient>
</defs>
<!-- 天空 -->
<rect width="800" height="500" fill="url(#sky)"/>
<!-- 太阳 -->
<g class="sun">
<circle cx="700" cy="80" r="48" fill="#ffd75e" opacity=".25"/>
<circle cx="700" cy="80" r="38" fill="#ffd75e"/>
</g>
<!-- 云 -->
<g class="cloud1" fill="#ffffff" opacity=".92">
<ellipse cx="0" cy="90" rx="38" ry="20"/>
<ellipse cx="32" cy="82" rx="28" ry="16"/>
<ellipse cx="62" cy="92" rx="30" ry="17"/>
</g>
<g class="cloud2" fill="#ffffff" opacity=".8">
<ellipse cx="0" cy="150" rx="28" ry="14"/>
<ellipse cx="26" cy="144" rx="20" ry="12"/>
<ellipse cx="50" cy="152" rx="22" ry="13"/>
</g>
<!-- 地面 -->
<rect y="420" width="800" height="80" fill="url(#grass)"/>
<ellipse cx="400" cy="424" rx="240" ry="10" fill="rgba(0,0,0,.12)"/>
<!-- 草丛与小花 -->
<g stroke="#3f7d2f" stroke-width="3" stroke-linecap="round" fill="none">
<path d="M110,420 q3,-16 6,0 M118,420 q3,-12 6,0"/>
<path d="M300,420 q3,-14 6,0 M308,420 q3,-10 6,0"/>
<path d="M520,420 q3,-15 6,0 M528,420 q3,-11 6,0"/>
<path d="M700,420 q3,-16 6,0 M708,420 q3,-12 6,0"/>
</g>
<g>
<circle cx="180" cy="414" r="4" fill="#f2789f"/><circle cx="180" cy="414" r="1.6" fill="#fff3b0"/>
<circle cx="640" cy="413" r="4" fill="#f2789f"/><circle cx="640" cy="413" r="1.6" fill="#fff3b0"/>
</g>
<!-- 支架 -->
<polygon points="400,336 358,420 442,420" fill="url(#wood)" stroke="#8a5426" stroke-width="2"/>
<!-- 跷跷板(整体旋转) -->
<g class="seesaw">
<!-- 木板 -->
<rect x="160" y="330" width="480" height="14" rx="7" fill="url(#wood)" stroke="#8a5426" stroke-width="2"/>
<!-- 把手 -->
<g fill="#6b4423">
<rect x="175" y="306" width="6" height="26" rx="3"/>
<rect x="165" y="301" width="26" height="7" rx="3.5"/>
<rect x="619" y="306" width="6" height="26" rx="3"/>
<rect x="609" y="301" width="26" height="7" rx="3.5"/>
</g>
<!-- 大象 -->
<g>
<!-- 远侧腿 -->
<rect x="216" y="294" width="15" height="37" rx="6" fill="#7f8b95"/>
<rect x="252" y="294" width="15" height="37" rx="6" fill="#7f8b95"/>
<!-- 尾巴 -->
<g class="tail">
<path d="M190,258 C176,266 175,284 184,292" fill="none" stroke="#7f8b95" stroke-width="5" stroke-linecap="round"/>
<circle cx="184" cy="292" r="4" fill="#6f7a84"/>
</g>
<!-- 身体 -->
<ellipse cx="245" cy="272" rx="58" ry="42" fill="url(#leg)"/>
<ellipse cx="235" cy="284" rx="40" ry="25" fill="rgba(255,255,255,.18)"/>
<!-- 近侧腿 -->
<rect x="200" y="296" width="15" height="37" rx="6" fill="url(#leg)"/>
<rect x="266" y="296" width="15" height="37" rx="6" fill="url(#leg)"/>
<!-- 头 -->
<circle cx="308" cy="248" r="30" fill="url(#leg)"/>
<!-- 耳朵 -->
<g class="ear">
<ellipse cx="294" cy="244" rx="18" ry="24" fill="#78848e" transform="rotate(-8 294 244)"/>
<ellipse cx="294" cy="244" rx="11" ry="16" fill="#c99aa6" transform="rotate(-8 294 244)"/>
</g>
<!-- 象牙 -->
<path d="M324,268 Q334,276 344,272" fill="none" stroke="#fdfdfd" stroke-width="5" stroke-linecap="round"/>
<!-- 鼻子 -->
<g class="trunk">
<path d="M333,249 C353,257 356,280 345,293 C340,299 331,297 331,290"
fill="none" stroke="#93a0aa" stroke-width="13" stroke-linecap="round"/>
</g>
<!-- 眼睛 -->
<circle cx="318" cy="238" r="3.5" fill="#2f3542"/>
<circle cx="319.3" cy="236.7" r="1.2" fill="#ffffff"/>
</g>
<!-- 小老鼠 -->
<g>
<path d="M583,320 C593,314 595,326 587,331" fill="none" stroke="#a9afb6" stroke-width="2.5" stroke-linecap="round"/>
<ellipse cx="568" cy="320" rx="15" ry="11" fill="#b9bec4"/>
<circle cx="553" cy="314" r="8" fill="#b9bec4"/>
<circle cx="548" cy="305" r="5" fill="#a9afb6"/>
<circle cx="558" cy="305" r="5" fill="#a9afb6"/>
<circle cx="548" cy="305" r="2.4" fill="#d8dde2"/>
<circle cx="558" cy="305" r="2.4" fill="#d8dde2"/>
<circle cx="550" cy="312" r="1.5" fill="#2f3542"/>
<circle cx="545" cy="316" r="2" fill="#e8a0a8"/>
<path d="M543,318 L534,316 M543,320 L534,321" stroke="#cfd4d9" stroke-width="1"/>
<ellipse cx="562" cy="330" rx="4" ry="2" fill="#a9afb6"/>
<ellipse cx="574" cy="330" rx="4" ry="2" fill="#a9afb6"/>
</g>
</g>
<!-- 支点螺栓 -->
<circle cx="400" cy="337" r="7" fill="#4a4f55"/>
<circle cx="398" cy="335" r="2.4" fill="#9aa0a6"/>
</svg>
</main>
</body>
</html>