deepseek-v4-pro cc与dsh狮子开飞机对比
lovesusu
2026-08-13 21:49
1
大家都测鹈鹕, 那我就测点不一样的
Claude Code:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>狮子开飞机 · Lion Pilot</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 30%, #2f6fae, #16406e 70%);
font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
overflow: hidden;
}
.stage {
position: relative;
width: min(1200px, 96vw);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
svg { display: block; width: 100%; height: auto; }
.title {
position: absolute;
top: 5%;
left: 0; right: 0;
text-align: center;
pointer-events: none;
z-index: 2;
}
.title h1 {
font-size: clamp(30px, 6vw, 58px);
color: #fff;
letter-spacing: .08em;
text-shadow: 0 3px 0 #e0762b, 0 7px 20px rgba(0,0,0,.3);
animation: floaty 4s ease-in-out infinite;
}
.title p {
margin-top: 8px;
color: #fff;
opacity: .92;
letter-spacing: .38em;
font-size: clamp(10px, 1.5vw, 14px);
text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
@keyframes floaty {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
</style>
</head>
<body>
<div class="stage">
<div class="title">
<h1>🦁 狮子开飞机</h1>
<p>LION PILOT · SVG 2D ANIMATION</p>
</div>
<svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#4db3f0"/>
<stop offset="0.65" stop-color="#a5e0fb"/>
<stop offset="1" stop-color="#e8f9ff"/>
</linearGradient>
<radialGradient id="sunGrad">
<stop offset="0" stop-color="#fff3b0"/>
<stop offset="1" stop-color="#ffcf3f"/>
</radialGradient>
<!-- 云朵组件 -->
<g id="cloud" fill="#ffffff">
<ellipse cx="0" cy="6" rx="72" ry="24"/>
<circle cx="-38" cy="-8" r="26"/>
<circle cx="-2" cy="-18" r="32"/>
<circle cx="34" cy="-10" r="28"/>
<circle cx="56" cy="2" r="18"/>
</g>
<!-- 太阳光芒单条 -->
<g id="ray">
<path d="M 0 -96 L 8 -64 L -8 -64 Z" fill="#ffd75e" opacity="0.9"/>
</g>
</defs>
<!-- ============ 天空 ============ -->
<rect width="1200" height="800" fill="url(#sky)"/>
<!-- ============ 太阳（带表情 + 旋转光芒） ============ -->
<g transform="translate(170,140)">
<circle r="80" fill="#ffd75e" opacity="0.25"/>
<g>
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="45s" repeatCount="indefinite"/>
<use href="#ray"/>
<use href="#ray" transform="rotate(36)"/>
<use href="#ray" transform="rotate(72)"/>
<use href="#ray" transform="rotate(108)"/>
<use href="#ray" transform="rotate(144)"/>
<use href="#ray" transform="rotate(180)"/>
<use href="#ray" transform="rotate(216)"/>
<use href="#ray" transform="rotate(252)"/>
<use href="#ray" transform="rotate(288)"/>
<use href="#ray" transform="rotate(324)"/>
</g>
<circle r="50" fill="url(#sunGrad)"/>
<circle cx="-14" cy="-8" r="4.5" fill="#7a4a1e"/>
<circle cx="14" cy="-8" r="4.5" fill="#7a4a1e"/>
<path d="M -12 12 Q 0 22 12 12" stroke="#7a4a1e" stroke-width="3" fill="none" stroke-linecap="round"/>
</g>
<!-- ============ 远层云（慢速） ============ -->
<g transform="translate(1450,110) scale(0.5)">
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-1900 0" dur="135s" begin="-16s" repeatCount="indefinite"/><use href="#cloud" opacity="0.8"/></g>
</g>
<g transform="translate(1500,205) scale(0.42)">
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-1950 0" dur="120s" begin="-66s" repeatCount="indefinite"/><use href="#cloud" opacity="0.75"/></g>
</g>
<g transform="translate(1420,305) scale(0.45)">
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-1900 0" dur="140s" begin="-112s" repeatCount="indefinite"/><use href="#cloud" opacity="0.7"/></g>
</g>
<!-- ============ 山丘与草地 ============ -->
<path d="M 0 800 L 0 660 Q 90 600 180 650 Q 260 590 360 640 Q 470 580 560 640 Q 680 595 780 645 Q 900 600 1000 650 Q 1100 610 1200 655 L 1200 800 Z" fill="#a9d99c"/>
<path d="M 0 800 L 0 700 Q 140 640 260 700 Q 380 640 500 705 Q 640 645 760 705 Q 900 655 1040 700 Q 1120 670 1200 700 L 1200 800 Z" fill="#7fc26b"/>
<rect y="756" width="1200" height="44" fill="#5aa844"/>
<ellipse cx="80" cy="772" rx="46" ry="7" fill="#4c9440" opacity="0.7"/>
<ellipse cx="420" cy="784" rx="60" ry="8" fill="#4c9440" opacity="0.7"/>
<ellipse cx="760" cy="770" rx="52" ry="7" fill="#4c9440" opacity="0.7"/>
<ellipse cx="1050" cy="786" rx="44" ry="6" fill="#4c9440" opacity="0.7"/>
<!-- 树木 -->
<g transform="translate(90,742)">
<rect x="-3.5" y="-16" width="7" height="16" rx="2" fill="#7a4a1e"/>
<circle cy="-22" r="14" fill="#3f8f3a"/>
<circle cx="-8" cy="-15" r="10" fill="#4c9c44"/>
<circle cx="8" cy="-15" r="10" fill="#4c9c44"/>
</g>
<g transform="translate(230,736) scale(0.85)">
<rect x="-3.5" y="-16" width="7" height="16" rx="2" fill="#7a4a1e"/>
<circle cy="-22" r="14" fill="#3f8f3a"/>
<circle cx="-8" cy="-15" r="10" fill="#4c9c44"/>
<circle cx="8" cy="-15" r="10" fill="#4c9c44"/>
</g>
<g transform="translate(1070,740)">
<rect x="-3.5" y="-16" width="7" height="16" rx="2" fill="#7a4a1e"/>
<circle cy="-22" r="14" fill="#3f8f3a"/>
<circle cx="-8" cy="-15" r="10" fill="#4c9c44"/>
<circle cx="8" cy="-15" r="10" fill="#4c9c44"/>
</g>
<g transform="translate(1150,742) scale(0.7)">
<rect x="-3.5" y="-16" width="7" height="16" rx="2" fill="#7a4a1e"/>
<circle cy="-22" r="14" fill="#3f8f3a"/>
<circle cx="-8" cy="-15" r="10" fill="#4c9c44"/>
<circle cx="8" cy="-15" r="10" fill="#4c9c44"/>
</g>
<!-- 飞机投影 -->
<ellipse cx="600" cy="705" rx="130" ry="14" fill="#3f7a2f" opacity="0.3"/>
<!-- ============ 中层云（中速） ============ -->
<g transform="translate(1520,140) scale(0.75)">
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-2000 0" dur="85s" begin="-17s" repeatCount="indefinite"/><use href="#cloud" opacity="0.92"/></g>
</g>
<g transform="translate(1480,255) scale(0.65)">
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-1950 0" dur="95s" begin="-46s" repeatCount="indefinite"/><use href="#cloud" opacity="0.9"/></g>
</g>
<g transform="translate(1560,385) scale(0.8)">
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-2000 0" dur="78s" begin="-55s" repeatCount="indefinite"/><use href="#cloud" opacity="0.95"/></g>
</g>
<g transform="translate(1440,475) scale(0.6)">
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-1900 0" dur="105s" begin="-5s" repeatCount="indefinite"/><use href="#cloud" opacity="0.85"/></g>
</g>
<!-- ============ 风线 ============ -->
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-1800 0" dur="2.8s" begin="-1.2s" repeatCount="indefinite"/>
<line x1="1280" y1="150" x2="1580" y2="150" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.25"/></g>
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-1800 0" dur="3.3s" begin="-2.1s" repeatCount="indefinite"/>
<line x1="1260" y1="285" x2="1520" y2="285" stroke="#ffffff" stroke-width="3.5" stroke-linecap="round" opacity="0.2"/></g>
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-1900 0" dur="3.0s" begin="-0.4s" repeatCount="indefinite"/>
<line x1="1300" y1="560" x2="1600" y2="560" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.22"/></g>
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-1850 0" dur="3.6s" begin="-1.8s" repeatCount="indefinite"/>
<line x1="1250" y1="610" x2="1550" y2="610" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.18"/></g>
<!-- ============ 飞机（狮子机长） ============ -->
<g transform="translate(600,350)">
<!-- 整体浮动 + 轻微俯仰 -->
<g>
<animateTransform attributeName="transform" type="translate"
values="0 0; 0 -16; 0 0" keyTimes="0;0.5;1"
calcMode="spline" keySplines="0.45 0 0.55 1;0.45 0 0.55 1"
dur="4.8s" repeatCount="indefinite"/>
<g>
<animateTransform attributeName="transform" type="rotate"
values="-1.8 0 0; 2.2 0 0; -1.8 0 0" keyTimes="0;0.5;1"
calcMode="spline" keySplines="0.45 0 0.55 1;0.45 0 0.55 1"
dur="4.8s" repeatCount="indefinite"/>
<!-- 尾气烟圈 -->
<circle cx="118" cy="6" r="5" fill="#ffffff">
<animate attributeName="cx" values="118; -60" dur="2.4s" begin="0s" repeatCount="indefinite"/>
<animate attributeName="cy" values="6; -14" dur="2.4s" begin="0s" repeatCount="indefinite"/>
<animate attributeName="r" values="5; 20" dur="2.4s" begin="0s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0; 0.55; 0.35; 0" keyTimes="0;0.2;0.6;1" dur="2.4s" begin="0s" repeatCount="indefinite"/>
</circle>
<circle cx="118" cy="6" r="5" fill="#ffffff">
<animate attributeName="cx" values="118; -60" dur="2.4s" begin="0.8s" repeatCount="indefinite"/>
<animate attributeName="cy" values="6; -14" dur="2.4s" begin="0.8s" repeatCount="indefinite"/>
<animate attributeName="r" values="5; 20" dur="2.4s" begin="0.8s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0; 0.55; 0.35; 0" keyTimes="0;0.2;0.6;1" dur="2.4s" begin="0.8s" repeatCount="indefinite"/>
</circle>
<circle cx="118" cy="6" r="5" fill="#ffffff">
<animate attributeName="cx" values="118; -60" dur="2.4s" begin="1.6s" repeatCount="indefinite"/>
<animate attributeName="cy" values="6; -14" dur="2.4s" begin="1.6s" repeatCount="indefinite"/>
<animate attributeName="r" values="5; 20" dur="2.4s" begin="1.6s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0; 0.55; 0.35; 0" keyTimes="0;0.2;0.6;1" dur="2.4s" begin="1.6s" repeatCount="indefinite"/>
</circle>
<!-- 尾翼：水平安定面 -->
<rect x="-248" y="-24" width="70" height="13" rx="6" fill="#e8482f" stroke="#c0351c" stroke-width="2"/>
<!-- 尾翼：垂直安定面 -->
<path d="M -212 -26 Q -230 -54 -194 -62 Q -200 -40 -204 -24 Z" fill="#c93a24"/>
<!-- 尾轮 -->
<line x1="-196" y1="18" x2="-196" y2="25" stroke="#7a4a1e" stroke-width="4"/>
<circle cx="-196" cy="32" r="7.5" fill="#3b3b3b" stroke="#222222" stroke-width="2"/>
<!-- 尾锥 + 机身 -->
<path d="M -156 -24 C -190 -28 -216 -22 -228 -13 L -228 13 C -216 22 -190 28 -156 24 Z" fill="#e8482f" stroke="#c0351c" stroke-width="2.5"/>
<rect x="-160" y="-28" width="230" height="56" rx="26" fill="#e8482f" stroke="#c0351c" stroke-width="2.5"/>
<rect x="-152" y="10" width="214" height="12" rx="6" fill="#f6d365" opacity="0.95"/>
<!-- 机身徽章 -->
<circle cx="18" cy="-2" r="11" fill="#f6d365"/>
<circle cx="18" cy="-2" r="5.5" fill="#e8482f"/>
<!-- 发动机整流罩 -->
<circle cx="92" cy="0" r="40" fill="#c93a24" stroke="#a83220" stroke-width="3"/>
<ellipse cx="120" cy="0" rx="14" ry="34" fill="#a83220" opacity="0.5"/>
<path d="M 66 -24 Q 92 -38 118 -20" stroke="#ffffff" stroke-width="6" fill="none" opacity="0.45" stroke-linecap="round"/>
<rect x="58" y="12" width="22" height="7" rx="3.5" fill="#6b5234"/>
<!-- 座舱口 -->
<ellipse cx="-40" cy="-24" rx="33" ry="11" fill="#53250e"/>
<!-- 下翼 -->
<rect x="-140" y="62" width="240" height="28" rx="11" fill="#f6d365" stroke="#c98a1f" stroke-width="3"/>
<rect x="-38" y="62" width="24" height="28" rx="6" fill="#e8482f"/>
<!-- 起落架 + 主轮 -->
<line x1="8" y1="26" x2="40" y2="56" stroke="#7a4a1e" stroke-width="4"/>
<line x1="40" y1="26" x2="40" y2="56" stroke="#7a4a1e" stroke-width="5"/>
<circle cx="40" cy="72" r="19" fill="#3b3b3b" stroke="#222222" stroke-width="2"/>
<circle cx="40" cy="72" r="7" fill="#f6d365"/>
<!-- ============ 狮子机长 ============ -->
<g>
<!-- 鬃毛 -->
<circle cx="-30" cy="-66" r="48" fill="#c07f26"/>
<circle cx="6" cy="-66" r="17" fill="#c07f26"/>
<circle cx="-5" cy="-91" r="17" fill="#c07f26"/>
<circle cx="-30" cy="-102" r="17" fill="#c07f26"/>
<circle cx="-55" cy="-91" r="17" fill="#c07f26"/>
<circle cx="-66" cy="-66" r="17" fill="#c07f26"/>
<circle cx="-55" cy="-41" r="17" fill="#c07f26"/>
<circle cx="-30" cy="-30" r="17" fill="#c07f26"/>
<circle cx="-5" cy="-41" r="17" fill="#c07f26"/>
<!-- 耳朵 -->
<circle cx="-55" cy="-94" r="11" fill="#f2b558"/>
<circle cx="-5" cy="-94" r="11" fill="#f2b558"/>
<circle cx="-55" cy="-94" r="5" fill="#c07f26"/>
<circle cx="-5" cy="-94" r="5" fill="#c07f26"/>
<!-- 脸 -->
<circle cx="-30" cy="-66" r="32" fill="#f2b558"/>
<!-- 吻部 + 鼻子 + 嘴 -->
<ellipse cx="-30" cy="-54" rx="15" ry="10" fill="#fbe3bd"/>
<path d="M -36 -58 Q -30 -64 -24 -58 Q -30 -55 -36 -58 Z" fill="#7a4a1e"/>
<path d="M -30 -51 Q -38 -45 -44 -47" stroke="#7a4a1e" stroke-width="2" fill="none" stroke-linecap="round"/>
<path d="M -30 -51 Q -22 -45 -16 -47" stroke="#7a4a1e" stroke-width="2" fill="none" stroke-linecap="round"/>
<!-- 腮红 -->
<circle cx="-48" cy="-52" r="4" fill="#f58f4a" opacity="0.55"/>
<circle cx="-12" cy="-52" r="4" fill="#f58f4a" opacity="0.55"/>
<!-- 胡须 -->
<g stroke="#7a4a1e" stroke-width="1.8" opacity="0.45" stroke-linecap="round">
<line x1="-44" y1="-58" x2="-58" y2="-60"/>
<line x1="-44" y1="-55" x2="-59" y2="-53"/>
<line x1="-44" y1="-52" x2="-57" y2="-47"/>
<line x1="-16" y1="-58" x2="-2" y2="-60"/>
<line x1="-16" y1="-55" x2="-1" y2="-53"/>
<line x1="-16" y1="-52" x2="-3" y2="-47"/>
</g>
<!-- 飞行护目镜 -->
<path d="M -60 -78 Q -30 -100 0 -78" stroke="#7a4a1e" stroke-width="7" fill="none"/>
<circle cx="-39" cy="-74" r="10.5" fill="#2c5d86" stroke="#1e3d59" stroke-width="2"/>
<circle cx="-21" cy="-74" r="10.5" fill="#2c5d86" stroke="#1e3d59" stroke-width="2"/>
<rect x="-32" y="-77" width="11" height="4" rx="2" fill="#7a4a1e"/>
<path d="M -43 -78 Q -39 -81 -35 -78" stroke="#ffffff" stroke-width="2" fill="none" opacity="0.7" stroke-linecap="round"/>
<path d="M -25 -78 Q -21 -81 -17 -78" stroke="#ffffff" stroke-width="2" fill="none" opacity="0.7" stroke-linecap="round"/>
<!-- 爪子 -->
<ellipse cx="-46" cy="-22" rx="10" ry="7" fill="#f2b558" stroke="#d18a1f" stroke-width="1.5"/>
<ellipse cx="-14" cy="-22" rx="10" ry="7" fill="#f2b558" stroke="#d18a1f" stroke-width="1.5"/>
<line x1="-50" y1="-22" x2="-50" y2="-17" stroke="#b06f1d" stroke-width="1.5"/>
<line x1="-44" y1="-22" x2="-44" y2="-17" stroke="#b06f1d" stroke-width="1.5"/>
<line x1="-18" y1="-22" x2="-18" y2="-17" stroke="#b06f1d" stroke-width="1.5"/>
<line x1="-12" y1="-22" x2="-12" y2="-17" stroke="#b06f1d" stroke-width="1.5"/>
</g>
<!-- 座舱前缘 -->
<path d="M -64 -25 Q -40 -16 -16 -25" stroke="#b8351f" stroke-width="7" fill="none" stroke-linecap="round"/>
<!-- 风挡 -->
<path d="M -8 -32 Q 4 -54 18 -34" stroke="#dff4ff" stroke-width="6" fill="none" opacity="0.85" stroke-linecap="round"/>
<!-- 围巾（迎风飘扬） -->
<path fill="#ff4d4d" stroke="#d63b2b" stroke-width="2">
<animate attributeName="d"
values="M -40 -44 C -70 -38 -100 -52 -150 -40 C -108 -22 -72 -20 -46 -30 Z;
M -40 -44 C -70 -50 -100 -34 -150 -44 C -108 -24 -72 -32 -46 -36 Z;
M -40 -44 C -70 -32 -100 -58 -150 -36 C -108 -26 -72 -14 -46 -26 Z;
M -40 -44 C -70 -38 -100 -52 -150 -40 C -108 -22 -72 -20 -46 -30 Z"
keyTimes="0;0.33;0.66;1"
calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1"
dur="1.3s" repeatCount="indefinite"/>
</path>
<circle cx="-36" cy="-40" r="11" fill="#e03e2f"/>
<circle cx="-36" cy="-40" r="5.5" fill="#c0351c"/>
<!-- 上翼 + 翼间支柱 -->
<line x1="-118" y1="-102" x2="-118" y2="62" stroke="#7a4a1e" stroke-width="5" stroke-linecap="round"/>
<line x1="52" y1="-102" x2="52" y2="62" stroke="#7a4a1e" stroke-width="5" stroke-linecap="round"/>
<rect x="-135" y="-132" width="280" height="30" rx="13" fill="#f6d365" stroke="#c98a1f" stroke-width="3"/>
<rect x="-28" y="-132" width="26" height="30" rx="6" fill="#e8482f"/>
<!-- 螺旋桨：静止光晕 + 高速旋转桨叶 -->
<ellipse cx="132" cy="0" rx="50" ry="13" fill="#ffffff" opacity="0.18"/>
<circle cx="132" cy="0" r="10" fill="#6b5234"/>
<circle cx="132" cy="0" r="3.5" fill="#f0d9a8"/>
<g transform="translate(132,0)">
<g>
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="0.09s" repeatCount="indefinite"/>
<path d="M 0 -8 C 24 -10 46 -5 62 0 C 46 5 24 10 0 8 Z" fill="#4e3d2a"/>
<path d="M 0 -8 C 24 -10 46 -5 62 0 C 46 5 24 10 0 8 Z" fill="#4e3d2a" transform="rotate(180)"/>
</g>
</g>
</g>
</g>
</g>
<!-- ============ 近层云（快速，会从飞机前掠过） ============ -->
<g transform="translate(1600,530) scale(1.05)">
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-2000 0" dur="45s" begin="-14s" repeatCount="indefinite"/><use href="#cloud" opacity="0.95"/></g>
</g>
<g transform="translate(1580,360) scale(1.05)">
<g><animateTransform attributeName="transform" type="translate" from="0 0" to="-2000 0" dur="52s" begin="-34s" repeatCount="indefinite"/><use href="#cloud" opacity="0.93"/></g>
</g>
<!-- ============ 小鸟 ============ -->
<g transform="translate(1330,160)">
<g>
<animateTransform attributeName="transform" type="translate" from="0 0" to="-1950 0" dur="100s" begin="-30s" repeatCount="indefinite"/>
<g>
<animateTransform attributeName="transform" type="scale" values="1 1; 1 0.35; 1 1" keyTimes="0;0.5;1" dur="0.9s" repeatCount="indefinite"/>
<path d="M -11 0 Q -5 -6 0 0 Q 5 -6 11 0" stroke="#4a5568" stroke-width="3" fill="none" stroke-linecap="round"/>
</g>
</g>
</g>
<g transform="translate(1410,120) scale(0.75)">
<g>
<animateTransform attributeName="transform" type="translate" from="0 0" to="-2000 0" dur="125s" begin="-85s" repeatCount="indefinite"/>
<g>
<animateTransform attributeName="transform" type="scale" values="1 1; 1 0.35; 1 1" keyTimes="0;0.5;1" dur="0.9s" repeatCount="indefinite"/>
<path d="M -11 0 Q -5 -6 0 0 Q 5 -6 11 0" stroke="#4a5568" stroke-width="3" fill="none" stroke-linecap="round"/>
</g>
</g>
</g>
</svg>
</div>
</body>
</html>
DeepSeek Harness:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>狮子开飞机 · SVG 2D 动画</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background: linear-gradient(180deg, #0b3d6b, #164a7d);
overflow: hidden;
font-family: "PingFang SC", "Microsoft YaHei", "Kaiti SC", sans-serif;
}
.stage {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
svg {
height: 100vh;
width: auto;
max-width: 100vw;
display: block;
}
.title {
position: absolute;
top: 4%;
left: 50%;
transform: translateX(-50%);
margin: 0;
font-size: clamp(26px, 4.5vw, 52px);
font-weight: 900;
color: #fff7d6;
text-shadow: 0 3px 0 #b5651d, 0 6px 14px rgba(0, 0, 0, .45);
letter-spacing: .12em;
animation: titlefloat 3s ease-in-out infinite;
white-space: nowrap;
}
.badge {
position: absolute;
top: calc(4% + clamp(46px, 7vw, 84px));
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, .82);
color: #7a2e26;
font-size: clamp(12px, 1.6vw, 16px);
padding: 5px 18px;
border-radius: 999px;
box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
white-space: nowrap;
}
.footer {
position: absolute;
bottom: 2%;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, .85);
font-size: 13px;
letter-spacing: .08em;
white-space: nowrap;
}
@keyframes titlefloat {
0%, 100% { margin-top: 0; }
50% { margin-top: -8px; }
}
/* ---------- 飞机整体起伏 ---------- */
.plane-bob {
animation: bob 3.4s ease-in-out infinite;
transform-origin: 600px 420px;
}
@keyframes bob {
0% { transform: translateY(0) rotate(-1.6deg); }
50% { transform: translateY(-22px) rotate(1.4deg); }
100% { transform: translateY(0) rotate(-1.6deg); }
}
/* ---------- 螺旋桨 ---------- */
.prop {
animation: spin .16s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- 围巾飘动 ---------- */
.scarf {
animation: flutter .8s ease-in-out infinite alternate;
transform-box: fill-box;
transform-origin: 88% 55%;
}
.scarf2 {
animation: flutter .65s ease-in-out .15s infinite alternate;
transform-box: fill-box;
transform-origin: 90% 60%;
}
@keyframes flutter {
from { transform: rotate(-7deg) skewY(-3deg); }
to { transform: rotate(9deg) skewY(5deg); }
}
/* ---------- 尾气烟圈 ---------- */
.puff {
animation: puffmove 2.8s linear infinite;
}
@keyframes puffmove {
0% { transform: translate(0, 0) scale(.6); opacity: 0; }
15% { opacity: .85; }
100% { transform: translate(-680px, -26px) scale(2.2); opacity: 0; }
}
/* ---------- 速度线 ---------- */
.speedline {
animation: linemove 1.2s linear infinite;
}
@keyframes linemove {
0% { transform: translateX(0); opacity: 0; }
25% { opacity: .8; }
100% { transform: translateX(-760px); opacity: 0; }
}
/* ---------- 云 ---------- */
.cloud {
animation: drift linear infinite;
}
@keyframes drift {
from { transform: translateX(1280px); }
to { transform: translateX(-420px); }
}
/* ---------- 飞鸟 ---------- */
.bird {
animation: fly linear infinite;
}
@keyframes fly {
from { transform: translateX(1320px); }
to { transform: translateX(-120px); }
}
/* ---------- 太阳光芒 ---------- */
.rays {
animation: rayrot 26s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes rayrot { to { transform: rotate(360deg); } }
/* ---------- 地面滚动 ---------- */
.ground {
animation: groundmove 24s linear infinite;
}
@keyframes groundmove {
to { transform: translateX(-1200px); }
}
</style>
</head>
<body>
<div class="stage">
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="狮子开飞机 2D 动画">
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6fbff0"/>
<stop offset="100%" stop-color="#e3f5ff"/>
</linearGradient>
</defs>
<!-- 天空 -->
<rect width="1200" height="800" fill="url(#skyGrad)"/>
<!-- 太阳与光芒 -->
<g transform="translate(150, 120)">
<g class="rays">
<rect x="-5" y="-88" width="10" height="26" rx="5" fill="#ffd166" opacity=".9"/>
<rect x="-5" y="-88" width="10" height="26" rx="5" fill="#ffd166" opacity=".9" transform="rotate(30)"/>
<rect x="-5" y="-88" width="10" height="26" rx="5" fill="#ffd166" opacity=".9" transform="rotate(60)"/>
<rect x="-5" y="-88" width="10" height="26" rx="5" fill="#ffd166" opacity=".9" transform="rotate(90)"/>
<rect x="-5" y="-88" width="10" height="26" rx="5" fill="#ffd166" opacity=".9" transform="rotate(120)"/>
<rect x="-5" y="-88" width="10" height="26" rx="5" fill="#ffd166" opacity=".9" transform="rotate(150)"/>
<rect x="-5" y="-88" width="10" height="26" rx="5" fill="#ffd166" opacity=".9" transform="rotate(180)"/>
<rect x="-5" y="-88" width="10" height="26" rx="5" fill="#ffd166" opacity=".9" transform="rotate(210)"/>
<rect x="-5" y="-88" width="10" height="26" rx="5" fill="#ffd166" opacity=".9" transform="rotate(240)"/>
<rect x="-5" y="-88" width="10" height="26" rx="5" fill="#ffd166" opacity=".9" transform="rotate(270)"/>
<rect x="-5" y="-88" width="10" height="26" rx="5" fill="#ffd166" opacity=".9" transform="rotate(300)"/>
<rect x="-5" y="-88" width="10" height="26" rx="5" fill="#ffd166" opacity=".9" transform="rotate(330)"/>
</g>
<circle r="52" fill="#ffd166"/>
<circle r="44" fill="#ffe9a3"/>
</g>
<!-- 云（远景、中景） -->
<g transform="translate(0, 90) scale(1.1)">
<g class="cloud" style="animation-duration: 30s; animation-delay: -5s;">
<g fill="#ffffff" opacity=".95">
<circle cx="40" cy="0" r="34"/>
<circle cx="85" cy="-16" r="40"/>
<circle cx="132" cy="-2" r="30"/>
<rect x="30" y="-2" width="115" height="30" rx="15"/>
</g>
</g>
</g>
<g transform="translate(0, 300) scale(.9)">
<g class="cloud" style="animation-duration: 36s; animation-delay: -27s;">
<g fill="#ffffff" opacity=".9">
<circle cx="40" cy="0" r="34"/>
<circle cx="85" cy="-16" r="40"/>
<circle cx="132" cy="-2" r="30"/>
<rect x="30" y="-2" width="115" height="30" rx="15"/>
</g>
</g>
</g>
<g transform="translate(0, 210) scale(.7)">
<g class="cloud" style="animation-duration: 42s; animation-delay: -18s;">
<g fill="#ffffff" opacity=".8">
<circle cx="40" cy="0" r="34"/>
<circle cx="85" cy="-16" r="40"/>
<circle cx="132" cy="-2" r="30"/>
<rect x="30" y="-2" width="115" height="30" rx="15"/>
</g>
</g>
</g>
<g transform="translate(0, 70) scale(.5)">
<g class="cloud" style="animation-duration: 55s; animation-delay: -40s;">
<g fill="#ffffff" opacity=".7">
<circle cx="40" cy="0" r="34"/>
<circle cx="85" cy="-16" r="40"/>
<circle cx="132" cy="-2" r="30"/>
<rect x="30" y="-2" width="115" height="30" rx="15"/>
</g>
</g>
</g>
<!-- 飞鸟 -->
<g transform="translate(0, 130)">
<g class="bird" style="animation-duration: 34s; animation-delay: -12s;">
<path d="M0 0 Q 8 -10 16 0 Q 24 -10 32 0" stroke="#2c3e50" stroke-width="3.5" fill="none" stroke-linecap="round"/>
</g>
</g>
<g transform="translate(0, 185)">
<g class="bird" style="animation-duration: 27s; animation-delay: -21s;">
<path d="M0 0 Q 8 -10 16 0 Q 24 -10 32 0" stroke="#2c3e50" stroke-width="3" fill="none" stroke-linecap="round" opacity=".85"/>
</g>
</g>
<!-- 地面（无缝循环滚动） -->
<g class="ground">
<g>
<ellipse cx="280" cy="800" rx="480" ry="150" fill="#b7dba0"/>
<ellipse cx="820" cy="812" rx="520" ry="170" fill="#8fc270"/>
<g transform="translate(160, 715)">
<rect x="-5" y="0" width="10" height="28" fill="#6f4e37"/>
<polygon points="0,-80 -24,0 24,0" fill="#3e7d32"/>
<polygon points="0,-58 -17,8 17,8" fill="#4e8f3f"/>
</g>
<g transform="translate(430, 695)">
<rect x="-5" y="0" width="10" height="28" fill="#6f4e37"/>
<polygon points="0,-80 -24,0 24,0" fill="#3e7d32"/>
<polygon points="0,-58 -17,8 17,8" fill="#4e8f3f"/>
</g>
<g transform="translate(720, 730)">
<rect x="-5" y="0" width="10" height="28" fill="#6f4e37"/>
<polygon points="0,-80 -24,0 24,0" fill="#3e7d32"/>
<polygon points="0,-58 -17,8 17,8" fill="#4e8f3f"/>
</g>
<g transform="translate(1030, 700)">
<rect x="-5" y="0" width="10" height="28" fill="#6f4e37"/>
<polygon points="0,-80 -24,0 24,0" fill="#3e7d32"/>
<polygon points="0,-58 -17,8 17,8" fill="#4e8f3f"/>
</g>
</g>
<g transform="translate(1200, 0)">
<ellipse cx="280" cy="800" rx="480" ry="150" fill="#b7dba0"/>
<ellipse cx="820" cy="812" rx="520" ry="170" fill="#8fc270"/>
<g transform="translate(160, 715)">
<rect x="-5" y="0" width="10" height="28" fill="#6f4e37"/>
<polygon points="0,-80 -24,0 24,0" fill="#3e7d32"/>
<polygon points="0,-58 -17,8 17,8" fill="#4e8f3f"/>
</g>
<g transform="translate(430, 695)">
<rect x="-5" y="0" width="10" height="28" fill="#6f4e37"/>
<polygon points="0,-80 -24,0 24,0" fill="#3e7d32"/>
<polygon points="0,-58 -17,8 17,8" fill="#4e8f3f"/>
</g>
<g transform="translate(720, 730)">
<rect x="-5" y="0" width="10" height="28" fill="#6f4e37"/>
<polygon points="0,-80 -24,0 24,0" fill="#3e7d32"/>
<polygon points="0,-58 -17,8 17,8" fill="#4e8f3f"/>
</g>
<g transform="translate(1030, 700)">
<rect x="-5" y="0" width="10" height="28" fill="#6f4e37"/>
<polygon points="0,-80 -24,0 24,0" fill="#3e7d32"/>
<polygon points="0,-58 -17,8 17,8" fill="#4e8f3f"/>
</g>
</g>
</g>
<!-- ============ 飞机 ============ -->
<g class="plane-bob">
<g transform="translate(600, 420) rotate(-4)">
<!-- 尾翼 -->
<ellipse cx="-218" cy="-16" rx="54" ry="13" fill="#e63946"/>
<path d="M -240 -6 C -262 -16 -276 -58 -258 -84 C -242 -58 -218 -38 -220 -8 Z" fill="#c1121f"/>
<path d="M -238 -22 C -250 -26 -258 -50 -250 -68 C -240 -50 -228 -34 -228 -22 Z" fill="#a41623" opacity=".8"/>
<!-- 机身 -->
<rect x="-235" y="-42" width="460" height="84" rx="42" fill="#e63946"/>
<ellipse cx="-20" cy="10" rx="165" ry="30" fill="#f6c67f"/>
<rect x="-212" y="-32" width="340" height="12" rx="6" fill="#fff3e0" opacity=".95"/>
<text x="-168" y="-6" font-size="22" font-weight="bold" fill="#7a2e26" font-family="'Trebuchet MS', sans-serif">LION-1</text>
<!-- 驾驶舱开口 -->
<ellipse cx="30" cy="-28" rx="95" ry="42" fill="#3a0d0d"/>
<ellipse cx="22" cy="-26" rx="42" ry="24" fill="#e8a33d"/>
<!-- ===== 狮子飞行员 ===== -->
<!-- 鬃毛 -->
<path d="M -6.6 -98 L -26.1 -92.5 L -12 -78 L -26.1 -63.5 L -6.6 -58 L -11.6 -38.4 L 8 -43.4 L 13.5 -23.9 L 28 -38 L 42.5 -23.9 L 48 -43.4 L 67.6 -38.4 L 62.6 -58 L 82.1 -63.5 L 68 -78 L 82.1 -92.5 L 62.6 -98 Z" fill="#d97b1f"/>
<!-- 耳朵 -->
<circle cx="-2" cy="-98" r="10" fill="#d97706"/>
<circle cx="-2" cy="-98" r="5" fill="#f6b93b"/>
<circle cx="58" cy="-102" r="10" fill="#d97706"/>
<circle cx="58" cy="-102" r="5" fill="#f6b93b"/>
<!-- 脸 -->
<circle cx="30" cy="-78" r="28" fill="#f6b93b"/>
<!-- 口鼻 -->
<ellipse cx="60" cy="-66" rx="15" ry="11" fill="#fbe5c8"/>
<circle cx="66" cy="-70" r="4" fill="#3d2b1f"/>
<path d="M 46 -58 Q 54 -52 62 -54" stroke="#4a2c2a" stroke-width="2" fill="none" stroke-linecap="round"/>
<!-- 胡须 -->
<line x1="48" y1="-66" x2="20" y2="-62" stroke="#4a2c2a" stroke-width="1.5" opacity=".6"/>
<line x1="48" y1="-64" x2="18" y2="-70" stroke="#4a2c2a" stroke-width="1.5" opacity=".6"/>
<line x1="48" y1="-62" x2="22" y2="-58" stroke="#4a2c2a" stroke-width="1.5" opacity=".6"/>
<!-- 飞行帽 -->
<path d="M -24 -86 Q 26 -114 66 -84 Q 28 -100 -24 -86 Z" fill="#8b4513"/>
<path d="M 60 -84 Q 78 -82 80 -72 Q 66 -80 56 -82 Z" fill="#6d3410"/>
<!-- 护目镜 -->
<path d="M -12 -66 Q 28 -58 66 -70" stroke="#5c3a21" stroke-width="6" fill="none"/>
<path d="M -14 -88 Q 30 -102 72 -86" stroke="#5c3a21" stroke-width="5" fill="none"/>
<circle cx="46" cy="-80" r="11" fill="#cfe8ff" stroke="#5c3a21" stroke-width="3"/>
<circle cx="50" cy="-80" r="4" fill="#222222"/>
<circle cx="51.5" cy="-81.5" r="1.5" fill="#ffffff"/>
<!-- 红围巾 -->
<path class="scarf2" d="M 8 -44 C -14 -32 -42 -36 -72 -28 C -64 -12 -30 -10 -4 -22 Z" fill="#b01f24"/>
<path class="scarf" d="M 14 -50 C -6 -40 -34 -54 -70 -44 C -60 -28 -30 -20 -2 -32 Z" fill="#d62828"/>
<circle cx="18" cy="-52" r="8" fill="#b01f24"/>
<!-- 操纵杆与爪子 -->
<line x1="100" y1="6" x2="108" y2="-34" stroke="#5c3a21" stroke-width="5" stroke-linecap="round"/>
<circle cx="108" cy="-36" r="7" fill="#3f2a14"/>
<circle cx="72" cy="-10" r="9" fill="#f6b93b"/>
<line x1="66" y1="-14" x2="68" y2="-6" stroke="#d97b1f" stroke-width="2" stroke-linecap="round"/>
<line x1="73" y1="-16" x2="73" y2="-5" stroke="#d97b1f" stroke-width="2" stroke-linecap="round"/>
<circle cx="110" cy="-32" r="9" fill="#f6b93b"/>
<line x1="105" y1="-36" x2="106" y2="-26" stroke="#d97b1f" stroke-width="2" stroke-linecap="round"/>
<line x1="113" y1="-37" x2="112" y2="-26" stroke="#d97b1f" stroke-width="2" stroke-linecap="round"/>
<!-- 座舱圈与风挡 -->
<path d="M -62 -16 A 94 44 0 0 1 126 -50" stroke="#7f1d1d" stroke-width="8" fill="none" stroke-linecap="round"/>
<path d="M -62 -16 A 94 44 0 0 0 126 -50" stroke="#7f1d1d" stroke-width="8" fill="none" stroke-linecap="round"/>
<path d="M 112 -10 C 122 -46 152 -58 172 -34 L 172 -2 C 152 -12 134 -8 112 -2 Z" fill="#bfe3ff" opacity=".75" stroke="#264653" stroke-width="4" stroke-linejoin="round"/>
<!-- 机翼支柱 -->
<line x1="-128" y1="-40" x2="-122" y2="-122" stroke="#6d4c41" stroke-width="6" stroke-linecap="round"/>
<line x1="120" y1="-40" x2="124" y2="-122" stroke="#6d4c41" stroke-width="6" stroke-linecap="round"/>
<!-- 上翼 -->
<g transform="rotate(-2)">
<rect x="-150" y="-150" width="300" height="30" rx="15" fill="#f4a261" stroke="#c77b3f" stroke-width="3"/>
<line x1="-100" y1="-148" x2="-100" y2="-122" stroke="#c77b3f" stroke-width="2" opacity=".55"/>
<line x1="-30" y1="-149" x2="-30" y2="-121" stroke="#c77b3f" stroke-width="2" opacity=".55"/>
<line x1="40" y1="-149" x2="40" y2="-121" stroke="#c77b3f" stroke-width="2" opacity=".55"/>
<line x1="110" y1="-148" x2="110" y2="-122" stroke="#c77b3f" stroke-width="2" opacity=".55"/>
</g>
<!-- 下翼 -->
<rect x="-120" y="16" width="250" height="28" rx="14" fill="#f4a261" stroke="#c77b3f" stroke-width="3"/>
<line x1="-70" y1="17" x2="-70" y2="43" stroke="#c77b3f" stroke-width="2" opacity=".55"/>
<line x1="0" y1="17" x2="0" y2="43" stroke="#c77b3f" stroke-width="2" opacity=".55"/>
<line x1="70" y1="17" x2="70" y2="43" stroke="#c77b3f" stroke-width="2" opacity=".55"/>
<!-- 发动机罩与机鼻 -->
<ellipse cx="205" cy="-8" rx="58" ry="46" fill="#b51f2b"/>
<ellipse cx="190" cy="-30" rx="24" ry="10" fill="#ffffff" opacity=".25"/>
<ellipse cx="258" cy="-8" rx="15" ry="34" fill="#fdf0d5" stroke="#d9b98a" stroke-width="2"/>
<!-- 起落架 -->
<line x1="150" y1="30" x2="156" y2="86" stroke="#4a2c2a" stroke-width="5" stroke-linecap="round"/>
<line x1="192" y1="30" x2="198" y2="86" stroke="#4a2c2a" stroke-width="5" stroke-linecap="round"/>
<line x1="140" y1="88" x2="214" y2="88" stroke="#4a2c2a" stroke-width="4"/>
<circle cx="156" cy="94" r="13" fill="#333333" stroke="#111111" stroke-width="3"/>
<circle cx="156" cy="94" r="5" fill="#f1faee"/>
<circle cx="200" cy="94" r="13" fill="#333333" stroke="#111111" stroke-width="3"/>
<circle cx="200" cy="94" r="5" fill="#f1faee"/>
<!-- 螺旋桨 -->
<g transform="translate(272, -8)">
<ellipse cx="0" cy="0" rx="7" ry="44" fill="#264653" opacity=".22"/>
<ellipse cx="0" cy="0" rx="4" ry="38" fill="#264653" opacity=".18"/>
<g class="prop">
<ellipse cx="0" cy="-36" rx="9" ry="36" fill="#264653" opacity=".9"/>
<ellipse cx="0" cy="-36" rx="9" ry="36" fill="#264653" opacity=".9" transform="rotate(120)"/>
<ellipse cx="0" cy="-36" rx="9" ry="36" fill="#264653" opacity=".9" transform="rotate(240)"/>
<circle r="9" fill="#7f1d1d" stroke="#f1faee" stroke-width="2"/>
</g>
</g>
<!-- 尾气 -->
<g transform="translate(292, -10)">
<g class="puff" style="animation-delay: 0s;">
<circle cx="0" cy="0" r="9" fill="#f0f8ff" opacity=".8"/>
<circle cx="10" cy="-4" r="7" fill="#f0f8ff" opacity=".7"/>
</g>
<g class="puff" style="animation-delay: -1.4s;">
<circle cx="0" cy="0" r="9" fill="#f0f8ff" opacity=".8"/>
<circle cx="10" cy="-4" r="7" fill="#f0f8ff" opacity=".7"/>
</g>
</g>
<!-- 速度线 -->
<g transform="translate(-250, -64)">
<line class="speedline" x1="0" y1="0" x2="66" y2="0" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity=".7" style="animation-duration: 1.1s;"/>
</g>
<g transform="translate(-282, -2)">
<line class="speedline" x1="0" y1="0" x2="66" y2="0" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity=".7" style="animation-duration: .9s; animation-delay: -.5s;"/>
</g>
<g transform="translate(-252, 44)">
<line class="speedline" x1="0" y1="0" x2="66" y2="0" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity=".7" style="animation-duration: 1.3s; animation-delay: -.3s;"/>
</g>
</g>
</g>
</svg>
<h1 class="title">🦁 狮子开飞机 ✈</h1>
<div class="badge">SVG · CSS 2D 动画</div>
<div class="footer">纯 SVG + CSS 动画 · 无 JavaScript</div>
</div>
</body>
</html>
最新回复 (1)
-
best_joker 08-13 23:531楼这是flah接入claude code的
这是flash接入dsh的
这是pro接入cc的
这是pro接入dsh的
这几个都是text-only模型，提示词:
生成html，内容是SVG绘制狮子开飞机2D动画，不需要测试
svg对于这种纯文本的模型证明不了什么，但是目前来看，ds-pro确实是一坨
明明flash体量的模型那么NB,哈吉梁，你要干什么
* 帖子来源Linux.do
附近帖子
- ↑神秘生图模型“mona-lisa-1”曝光：含 OpenAI 来源信号，GPT-Image-2 发布三个月仍稳坐第一
- 📍 deepseek-v4-pro cc与dsh狮子开飞机对比
- ↓当“三支一扶”都卷到要靠作弊去抢
- ↓chatgpt似乎对部分team不再进行“tibo重置”了
- ↓DeepSeek harness 发了
- ↓gpt和ds都拉完了，求grok4.6渠道或者能注册的公益站
- ↓新学到一个骑电车小技巧