492 lines
26 KiB
XML
492 lines
26 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%">
|
|
<defs>
|
|
<!-- 天空与太阳渐变 -->
|
|
<linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#2a75d3" />
|
|
<stop offset="45%" stop-color="#64a6ed" />
|
|
<stop offset="75%" stop-color="#ffdf8e" />
|
|
<stop offset="100%" stop-color="#ffaa5a" />
|
|
</linearGradient>
|
|
|
|
<radialGradient id="sunGrad" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#ffffff" />
|
|
<stop offset="30%" stop-color="#ffeb99" />
|
|
<stop offset="100%" stop-color="#ffaa5a" stop-opacity="0" />
|
|
</radialGradient>
|
|
|
|
<radialGradient id="vignette" cx="50%" cy="50%" r="75%">
|
|
<stop offset="50%" stop-color="#000" stop-opacity="0" />
|
|
<stop offset="100%" stop-color="#000" stop-opacity="0.45" />
|
|
</radialGradient>
|
|
|
|
<!-- 海洋渐变 -->
|
|
<linearGradient id="oceanGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#0288D1" />
|
|
<stop offset="40%" stop-color="#0097A7" />
|
|
<stop offset="100%" stop-color="#00BCD4" />
|
|
</linearGradient>
|
|
<linearGradient id="waveGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#4DD0E1" stop-opacity="0.7" />
|
|
<stop offset="100%" stop-color="#0288D1" stop-opacity="0.3" />
|
|
</linearGradient>
|
|
|
|
<!-- 沙滩渐变 -->
|
|
<linearGradient id="sandGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#E6C280" />
|
|
<stop offset="40%" stop-color="#D4A352" />
|
|
<stop offset="100%" stop-color="#B88035" />
|
|
</linearGradient>
|
|
|
|
<!-- 鹈鹕羽毛与身体纹理渐变 -->
|
|
<radialGradient id="pelicanBody" cx="35%" cy="30%" r="75%">
|
|
<stop offset="0%" stop-color="#ffffff" />
|
|
<stop offset="55%" stop-color="#e0e5ec" />
|
|
<stop offset="85%" stop-color="#a3b1c6" />
|
|
<stop offset="100%" stop-color="#75869e" />
|
|
</radialGradient>
|
|
|
|
<linearGradient id="neckGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ffffff" />
|
|
<stop offset="100%" stop-color="#cbd5e1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="beakTop" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#FDE047" />
|
|
<stop offset="60%" stop-color="#F59E0B" />
|
|
<stop offset="100%" stop-color="#EA580C" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="pouch" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#FCD34D" />
|
|
<stop offset="35%" stop-color="#F97316" />
|
|
<stop offset="100%" stop-color="#BE123C" />
|
|
</linearGradient>
|
|
|
|
<!-- 自行车车架与金属镀铬渐变 -->
|
|
<linearGradient id="bikeColor" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#2DD4BF" />
|
|
<stop offset="50%" stop-color="#0F766E" />
|
|
<stop offset="100%" stop-color="#042F2E" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="chrome" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#FFFFFF" />
|
|
<stop offset="25%" stop-color="#94A3B8" />
|
|
<stop offset="50%" stop-color="#1E293B" />
|
|
<stop offset="75%" stop-color="#CBD5E1" />
|
|
<stop offset="100%" stop-color="#FFFFFF" />
|
|
</linearGradient>
|
|
|
|
<!-- 滤镜效果 -->
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="15" result="blur" />
|
|
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
|
</filter>
|
|
|
|
<filter id="shadow" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feDropShadow dx="8" dy="15" stdDeviation="10" flood-color="#000000" flood-opacity="0.35" />
|
|
</filter>
|
|
|
|
<filter id="lightShadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="3" dy="5" stdDeviation="4" flood-color="#000000" flood-opacity="0.3" />
|
|
</filter>
|
|
|
|
<filter id="blurShadow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="20" />
|
|
</filter>
|
|
</defs>
|
|
|
|
<style>
|
|
/* CSS 动画：为画面注入“生动”的气息 */
|
|
@keyframes spin { 100% { transform: rotate(360deg); } }
|
|
@keyframes drift { 100% { transform: translateX(-1400px); } }
|
|
@keyframes wave { 0% { transform: translateX(0px); } 100% { transform: translateX(-60px); } }
|
|
@keyframes bounce { 0% { transform: translateY(0px); } 100% { transform: translateY(5px); } }
|
|
@keyframes flutter { 0% { transform: rotate(0deg) scaleY(1); } 100% { transform: rotate(8deg) scaleY(1.05); } }
|
|
@keyframes flap { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } }
|
|
@keyframes wobble { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(2deg) scale(1.02); } }
|
|
@keyframes sand { 0% { transform: translate(0px, 0px) scale(1); opacity: 1; } 100% { transform: translate(-100px, -40px) scale(0.3); opacity: 0; } }
|
|
@keyframes speed { 0% { transform: translateX(300px); opacity: 0; } 15% { opacity: 0.6; } 85% { opacity: 0.6; } 100% { transform: translateX(-1400px); opacity: 0; } }
|
|
@keyframes bird-fly { 0% { transform: translateY(0px); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0px); } }
|
|
|
|
.wheel { transform-origin: 0px 0px; animation: spin 0.6s linear infinite; }
|
|
.cloud { animation: drift linear infinite; }
|
|
.wave { animation: wave 3.5s ease-in-out infinite alternate; }
|
|
.bounce { animation: bounce 0.4s ease-in-out infinite alternate; }
|
|
.scarf { transform-origin: 700px 230px; animation: flutter 0.15s ease-in-out infinite alternate; }
|
|
.wing { transform-origin: 640px 280px; animation: flap 0.3s ease-in-out infinite alternate; }
|
|
.pouch-anim { transform-origin: 800px 165px; animation: wobble 0.2s ease-in-out infinite alternate; }
|
|
.sand { animation: sand 0.5s linear infinite; }
|
|
.speed { animation: speed linear infinite; }
|
|
.bird { animation: bird-fly 0.7s infinite; }
|
|
</style>
|
|
|
|
<!-- ================= 背景层 ================= -->
|
|
<!-- 天空 -->
|
|
<rect width="1200" height="800" fill="url(#skyGrad)" />
|
|
|
|
<!-- 太阳与光晕 -->
|
|
<circle cx="1000" cy="300" r="140" fill="url(#sunGrad)" filter="url(#glow)" />
|
|
<circle cx="1000" cy="300" r="55" fill="#FFF" filter="url(#glow)" />
|
|
|
|
<!-- 速度/风线 (背景) -->
|
|
<g stroke="#FFFFFF" stroke-linecap="round" opacity="0.4">
|
|
<line x1="800" y1="200" x2="1100" y2="200" stroke-width="4" class="speed" style="animation-delay: 0s; animation-duration: 2s;" />
|
|
<line x1="300" y1="120" x2="550" y2="120" stroke-width="3" class="speed" style="animation-delay: 0.5s; animation-duration: 2.5s;" />
|
|
<line x1="150" y1="350" x2="400" y2="350" stroke-width="2" class="speed" style="animation-delay: 1.2s; animation-duration: 1.8s;" />
|
|
</g>
|
|
|
|
<!-- 远处的飞鸟 -->
|
|
<g fill="none" stroke="#1E293B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5">
|
|
<path class="bird" style="animation-delay: 0s;" d="M 300 150 Q 315 130 330 150 Q 345 130 360 150" />
|
|
<path class="bird" style="animation-delay: -0.3s;" d="M 380 120 Q 390 105 400 120 Q 410 105 420 120" />
|
|
<path class="bird" style="animation-delay: -0.6s;" d="M 250 180 Q 260 165 270 180 Q 280 165 290 180" />
|
|
</g>
|
|
|
|
<!-- 漂浮的云朵 -->
|
|
<g fill="#FFFFFF" opacity="0.8">
|
|
<path class="cloud" style="animation-duration: 45s;" d="M 120 180 Q 150 150, 190 170 Q 230 140, 280 180 Q 320 170, 340 210 L 90 210 Q 70 180, 120 180 Z" />
|
|
<path class="cloud" style="animation-duration: 35s; animation-delay: -15s;" d="M 750 120 Q 790 90, 830 120 Q 890 90, 930 140 Q 970 130, 990 170 L 710 170 Q 700 140, 750 120 Z" transform="scale(0.8) translate(300, 0)" />
|
|
<path class="cloud" style="animation-duration: 55s; animation-delay: -30s;" d="M 450 250 Q 480 230, 510 250 Q 550 220, 590 260 Q 620 250, 640 280 L 420 280 Q 410 260, 450 250 Z" opacity="0.6" />
|
|
</g>
|
|
|
|
<!-- ================= 中景层 (海洋) ================= -->
|
|
<rect x="0" y="450" width="1200" height="150" fill="url(#oceanGrad)" />
|
|
|
|
<g fill="url(#waveGrad)">
|
|
<path class="wave" d="M 0 460 Q 150 440, 300 470 T 600 460 T 900 470 T 1200 460 L 1200 600 L 0 600 Z" />
|
|
<path class="wave" style="animation-delay: -1.5s; animation-duration: 4s;" d="M 0 480 Q 200 500, 400 470 T 800 480 T 1200 490 L 1200 600 L 0 600 Z" fill="#0097A7" opacity="0.8"/>
|
|
</g>
|
|
|
|
<!-- 海浪泡沫 -->
|
|
<path class="wave" d="M 0 540 Q 250 520, 500 550 T 1000 540 T 1200 550 L 1200 600 L 0 600 Z" fill="#E0F2FE" opacity="0.85" />
|
|
<path class="wave" style="animation-delay: -2s;" d="M 0 560 Q 300 545, 600 565 T 1200 555 L 1200 600 L 0 600 Z" fill="#F8FAFC" opacity="0.9" />
|
|
|
|
<!-- ================= 前景层 (沙滩与阴影) ================= -->
|
|
<path d="M 0 570 Q 300 540, 600 570 T 1200 550 L 1200 800 L 0 800 Z" fill="url(#sandGrad)" />
|
|
|
|
<!-- 湿润沙滩的高光反射 -->
|
|
<path d="M 0 575 Q 300 545, 600 575 T 1200 555 L 1200 580 T 600 595 Q 300 565, 0 590 Z" fill="#FFF3E0" opacity="0.3" />
|
|
|
|
<!-- 地面总体投影 -->
|
|
<g fill="#A17430" opacity="0.55" filter="url(#blurShadow)">
|
|
<ellipse cx="600" cy="720" rx="360" ry="25" />
|
|
<ellipse cx="350" cy="715" rx="80" ry="15" />
|
|
<ellipse cx="850" cy="715" rx="80" ry="15" />
|
|
</g>
|
|
|
|
<!-- ================= 自行车与鹈鹕主体 ================= -->
|
|
|
|
<!-- 后轮 (带旋转动画和运动模糊) -->
|
|
<g transform="translate(350, 600)" filter="url(#lightShadow)">
|
|
<g class="wheel">
|
|
<!-- 轮胎 -->
|
|
<circle cx="0" cy="0" r="110" fill="none" stroke="#1c1c1c" stroke-width="20" />
|
|
<circle cx="0" cy="0" r="120" fill="none" stroke="#000" stroke-width="2" stroke-dasharray="6 6" />
|
|
<circle cx="0" cy="0" r="98" fill="none" stroke="#F8FAFC" stroke-width="6" />
|
|
<!-- 轮辋 -->
|
|
<circle cx="0" cy="0" r="92" fill="none" stroke="url(#chrome)" stroke-width="8" />
|
|
<!-- 辐条 (高速旋转的视觉效果) -->
|
|
<g stroke="#94A3B8" stroke-width="2" opacity="0.8">
|
|
<line x1="0" y1="-92" x2="0" y2="92" />
|
|
<line x1="-92" y1="0" x2="92" y2="0" />
|
|
<line x1="-65" y1="-65" x2="65" y2="65" />
|
|
<line x1="-65" y1="65" x2="65" y2="-65" />
|
|
<line x1="-35" y1="-85" x2="35" y2="85" />
|
|
<line x1="-85" y1="-35" x2="85" y2="35" />
|
|
<line x1="-35" y1="85" x2="35" y2="-85" />
|
|
<line x1="-85" y1="35" x2="85" y2="-35" />
|
|
</g>
|
|
<!-- 运动模糊层 -->
|
|
<circle cx="0" cy="0" r="60" fill="none" stroke="#E2E8F0" stroke-width="120" stroke-dasharray="10 30" opacity="0.1" />
|
|
<!-- 轮毂 -->
|
|
<circle cx="0" cy="0" r="14" fill="url(#chrome)" />
|
|
</g>
|
|
</g>
|
|
|
|
<!-- 左踏板与曲柄 (处于背景静止滑行状态) -->
|
|
<line x1="550" y1="600" x2="505" y2="600" stroke="#94A3B8" stroke-width="8" stroke-linecap="round" />
|
|
<rect x="490" y="595" width="30" height="10" rx="3" fill="#1E293B" />
|
|
|
|
<!-- 鹈鹕左腿 (背景) -->
|
|
<g>
|
|
<path d="M 520 480 L 515 590 L 495 595 L 500 490 Z" fill="#EA580C" />
|
|
<path d="M 495 595 L 535 605 L 545 615 L 510 620 L 485 605 Z" fill="#EA580C" />
|
|
</g>
|
|
|
|
<!-- 车架及配件 -->
|
|
<g filter="url(#shadow)">
|
|
<!-- 后挡泥板 -->
|
|
<path d="M 245 600 A 115 115 0 0 1 455 550" fill="none" stroke="url(#chrome)" stroke-width="12" stroke-linecap="round" />
|
|
<line x1="350" y1="600" x2="280" y2="520" stroke="url(#chrome)" stroke-width="4" />
|
|
|
|
<!-- 翠蓝色主车架 -->
|
|
<g stroke="url(#bikeColor)" stroke-width="16" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="350" y1="600" x2="550" y2="600" />
|
|
<line x1="350" y1="600" x2="500" y2="420" />
|
|
<line x1="550" y1="600" x2="480" y2="360" />
|
|
<line x1="550" y1="600" x2="820" y2="480" />
|
|
<path d="M 500 420 Q 650 450, 800 380" fill="none" />
|
|
<line x1="800" y1="380" x2="820" y2="480" stroke-width="20" />
|
|
<path d="M 820 480 Q 840 550, 850 600" fill="none" stroke-width="14" />
|
|
</g>
|
|
|
|
<!-- 车把立管与左侧把手 -->
|
|
<line x1="800" y1="380" x2="790" y2="340" stroke="url(#chrome)" stroke-width="14" stroke-linecap="round" />
|
|
<path d="M 790 340 Q 760 320, 730 300" fill="none" stroke="url(#chrome)" stroke-width="12" stroke-linecap="round" />
|
|
<line x1="730" y1="300" x2="715" y2="285" stroke="#334155" stroke-width="16" stroke-linecap="round" />
|
|
|
|
<!-- 鹈鹕的左翼 (在背景握住左侧把手) -->
|
|
<path d="M 640 270 Q 680 240, 720 290 Q 670 300, 630 290 Z" fill="#94A3B8" />
|
|
<circle cx="720" cy="290" r="10" fill="#94A3B8" />
|
|
|
|
<!-- 复古真皮车座 -->
|
|
<path d="M 475 360 Q 515 340, 545 360 Q 555 375, 540 380 L 465 380 Z" fill="#3F2E27" />
|
|
<path d="M 470 380 L 535 380 L 525 390 L 480 390 Z" fill="#291D17" />
|
|
<circle cx="485" cy="395" r="4" fill="none" stroke="url(#chrome)" stroke-width="3" />
|
|
<circle cx="505" cy="395" r="4" fill="none" stroke="url(#chrome)" stroke-width="3" />
|
|
|
|
<!-- 传动系统 (链条与齿轮) -->
|
|
<circle cx="350" cy="600" r="18" fill="#1E293B" />
|
|
<circle cx="550" cy="600" r="35" fill="none" stroke="#455A64" stroke-width="8" />
|
|
<circle cx="550" cy="600" r="25" fill="none" stroke="#94A3B8" stroke-width="4" stroke-dasharray="8 6" />
|
|
<!-- 链条 -->
|
|
<path d="M 350 582 L 550 565" stroke="#333" stroke-width="4" stroke-dasharray="6 4" />
|
|
<path d="M 350 618 L 550 635" stroke="#333" stroke-width="4" stroke-dasharray="6 4" />
|
|
<circle cx="550" cy="600" r="12" fill="url(#chrome)" />
|
|
</g>
|
|
|
|
<!-- 右侧踏板与曲柄 (前景) -->
|
|
<g filter="url(#shadow)">
|
|
<line x1="550" y1="600" x2="595" y2="600" stroke="#E2E8F0" stroke-width="10" stroke-linecap="round" />
|
|
<rect x="580" y="595" width="30" height="10" rx="3" fill="#0F172A" />
|
|
</g>
|
|
|
|
|
|
<!-- ================= 核心角色：生动的鹈鹕 (加入弹跳与飘动特效) ================= -->
|
|
<!-- 通过 bounce 类模拟在沙滩骑行时的颠簸感 -->
|
|
<g class="bounce">
|
|
<!-- 尾巴羽毛 -->
|
|
<g filter="url(#shadow)">
|
|
<path d="M 450 360 L 320 390 L 350 340 Z" fill="#E2E8F0" stroke="#CBD5E1" stroke-width="2"/>
|
|
<path d="M 440 380 L 310 420 L 370 370 Z" fill="#F1F5F9" stroke="#CBD5E1" stroke-width="2"/>
|
|
</g>
|
|
|
|
<!-- 逼真的身躯与脖子 -->
|
|
<g filter="url(#shadow)">
|
|
<path d="M 480 340 C 450 220, 600 200, 680 250 C 730 280, 700 380, 600 390 C 520 400, 490 380, 480 340 Z" fill="url(#pelicanBody)" />
|
|
<path d="M 660 260 Q 720 200, 780 150 L 820 180 Q 750 250, 680 300 Z" fill="url(#neckGrad)" />
|
|
|
|
<!-- 羽毛层次与高光遮罩 -->
|
|
<path d="M 500 320 Q 550 350, 520 380" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M 540 300 Q 600 340, 560 380" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" opacity="0.6"/>
|
|
<path d="M 580 310 Q 640 340, 600 380" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" opacity="0.4"/>
|
|
</g>
|
|
|
|
<!-- 头部、发冠与飞行员护目镜 -->
|
|
<g filter="url(#shadow)">
|
|
<!-- 迎风竖起的羽冠 -->
|
|
<path d="M 800 150 Q 760 100, 730 130 Q 760 140, 780 160 Z" fill="#FFFFFF" />
|
|
<path d="M 790 140 Q 740 80, 710 110 Q 750 130, 770 150 Z" fill="#E2E8F0" />
|
|
<circle cx="805" cy="155" r="28" fill="#FFFFFF" />
|
|
|
|
<!-- 锐利的眼睛 -->
|
|
<circle cx="810" cy="145" r="10" fill="#FDE047" stroke="#EA580C" stroke-width="1.5" />
|
|
<circle cx="812" cy="145" r="5" fill="#09090B" />
|
|
<circle cx="814" cy="143" r="2.5" fill="#FFFFFF" />
|
|
|
|
<!-- 推上额头的飞行员防风镜 -->
|
|
<path d="M 780 150 Q 805 130, 830 150" fill="none" stroke="#1E293B" stroke-width="6" />
|
|
<ellipse cx="800" cy="120" rx="14" ry="20" fill="#0F172A" stroke="#94A3B8" stroke-width="4" transform="rotate(15 800 120)" />
|
|
<path d="M 795 110 L 805 125" stroke="#FFFFFF" stroke-width="3" opacity="0.6" transform="rotate(15 800 120)" />
|
|
<ellipse cx="830" cy="125" rx="14" ry="20" fill="#0F172A" stroke="#94A3B8" stroke-width="4" transform="rotate(25 830 125)" />
|
|
<path d="M 825 115 L 835 130" stroke="#FFFFFF" stroke-width="3" opacity="0.6" transform="rotate(25 830 125)" />
|
|
</g>
|
|
|
|
<!-- 标志性的大嘴与随风抖动的喉囊 -->
|
|
<g filter="url(#shadow)">
|
|
<!-- 上喙 -->
|
|
<path d="M 800 150 Q 950 140, 1100 180 Q 1120 190, 1105 195 Q 950 160, 800 165 Z" fill="url(#beakTop)" stroke="#B45309" stroke-width="1.5" />
|
|
<path d="M 1105 195 Q 1115 205, 1100 210 Q 1105 205, 1105 195 Z" fill="#C2410C" />
|
|
|
|
<!-- 喉囊 (配合 CSS 产生抖动效果) -->
|
|
<g class="pouch-anim">
|
|
<path d="M 800 165 Q 950 160, 1100 190 Q 1050 350, 900 300 C 800 250, 780 200, 800 165 Z" fill="url(#pouch)" opacity="0.95" stroke="#9F1239" stroke-width="2" />
|
|
<!-- 喉囊毛细血管/张力纹理 -->
|
|
<path d="M 820 200 Q 900 250, 1000 240" fill="none" stroke="#E11D48" stroke-width="3" opacity="0.4" />
|
|
<path d="M 810 230 Q 880 280, 950 270" fill="none" stroke="#E11D48" stroke-width="2" opacity="0.3" />
|
|
<path d="M 840 260 Q 890 300, 930 290" fill="none" stroke="#E11D48" stroke-width="2" opacity="0.25" />
|
|
</g>
|
|
</g>
|
|
|
|
<!-- 红色拉风围巾 -->
|
|
<g filter="url(#shadow)">
|
|
<path d="M 700 230 C 720 250, 750 250, 780 230 C 770 210, 720 200, 700 230 Z" fill="#DC2626" />
|
|
<g class="scarf">
|
|
<path d="M 720 240 C 600 260, 500 150, 350 200 C 450 250, 550 320, 700 250 Z" fill="#EF4444" />
|
|
<path d="M 650 240 L 630 255" stroke="#FFFFFF" stroke-width="8" />
|
|
<path d="M 580 215 L 560 235" stroke="#FFFFFF" stroke-width="8" />
|
|
<path d="M 510 190 L 490 210" stroke="#FFFFFF" stroke-width="6" />
|
|
<path d="M 440 185 L 430 205" stroke="#FFFFFF" stroke-width="5" />
|
|
</g>
|
|
</g>
|
|
|
|
<!-- 右翼 (延伸并握住车把，带有动态拍打效果) -->
|
|
<g class="wing" filter="url(#shadow)">
|
|
<!-- 翅膀基本形状 -->
|
|
<path d="M 640 280 Q 750 250, 830 310 Q 750 330, 660 320 Z" fill="#FFFFFF" />
|
|
<path d="M 750 280 Q 650 380, 550 350 Q 650 320, 700 270 Z" fill="#CBD5E1" />
|
|
<!-- 分明的飞羽层次 -->
|
|
<path d="M 780 295 Q 680 420, 550 380 Q 680 340, 720 285 Z" fill="#0F172A" />
|
|
<path d="M 810 310 Q 720 450, 580 420 Q 720 370, 760 300 Z" fill="#334155" />
|
|
<!-- 包裹车把的“手” -->
|
|
<circle cx="830" cy="310" r="14" fill="#E2E8F0" />
|
|
<path d="M 825 300 Q 840 310, 825 320" fill="none" stroke="#94A3B8" stroke-width="3" />
|
|
</g>
|
|
</g> <!-- 弹跳组结束 -->
|
|
|
|
<!-- 右腿 (前景，位于弹跳组之外以保持踩踏在踏板上的稳定性) -->
|
|
<g filter="url(#shadow)">
|
|
<!-- 肌肉感的大腿 -->
|
|
<path d="M 600 370 Q 640 450, 610 500 Q 570 450, 560 380 Z" fill="url(#pelicanBody)" />
|
|
<!-- 带鳞片的细长腿 -->
|
|
<path d="M 590 480 L 605 590 L 585 595 L 570 490 Z" fill="#F97316" stroke="#C2410C" stroke-width="2" />
|
|
<!-- 紧扣踏板的脚蹼 -->
|
|
<path d="M 585 595 L 630 610 L 640 625 L 600 625 L 575 605 Z" fill="#F97316" stroke="#C2410C" stroke-width="2" stroke-linejoin="round" />
|
|
</g>
|
|
|
|
|
|
<!-- ================= 前车架及挂件细节 ================= -->
|
|
<g filter="url(#shadow)">
|
|
<!-- 右侧车把及皮质把套 -->
|
|
<path d="M 790 340 Q 820 320, 840 310" fill="none" stroke="url(#chrome)" stroke-width="12" stroke-linecap="round" />
|
|
<line x1="840" y1="310" x2="855" y2="300" stroke="#334155" stroke-width="16" stroke-linecap="round" />
|
|
|
|
<!-- 前挡泥板 -->
|
|
<path d="M 745 600 A 115 115 0 0 1 955 550" fill="none" stroke="url(#chrome)" stroke-width="12" stroke-linecap="round" />
|
|
<line x1="850" y1="600" x2="780" y2="520" stroke="url(#chrome)" stroke-width="4" />
|
|
|
|
<!-- 充满生活气息的柳条筐与新鲜捕获的鱼 -->
|
|
<g transform="translate(835, 340)">
|
|
<!-- 跃出筐外的鱼 -->
|
|
<g transform="translate(20, -10) rotate(15)">
|
|
<path d="M 0 0 Q 15 -20, 30 -5 Q 15 10, 0 0 Z" fill="#38BDF8" />
|
|
<path d="M 30 -5 L 42 -15 L 42 5 Z" fill="#0284C7" />
|
|
<circle cx="8" cy="-3" r="2.5" fill="#FFFFFF" />
|
|
<circle cx="8" cy="-3" r="1" fill="#0F172A" />
|
|
</g>
|
|
<g transform="translate(5, -5) rotate(45)">
|
|
<path d="M 0 0 Q 15 -20, 30 -5 Q 15 10, 0 0 Z" fill="#7DD3FC" />
|
|
<path d="M 30 -5 L 42 -15 L 42 5 Z" fill="#0284C7" />
|
|
<circle cx="8" cy="-3" r="2.5" fill="#FFFFFF" />
|
|
<circle cx="8" cy="-3" r="1" fill="#0F172A" />
|
|
</g>
|
|
<!-- 柳条筐主体 -->
|
|
<path d="M 0 0 L 45 0 L 35 55 L 5 55 Z" fill="#D4A373" stroke="#9A7B4F" stroke-width="3" stroke-linejoin="round" />
|
|
<!-- 细致的编织纹理 (横向) -->
|
|
<line x1="5" y1="12" x2="42" y2="12" stroke="#9A7B4F" stroke-width="2.5"/>
|
|
<line x1="6" y1="24" x2="39" y2="24" stroke="#9A7B4F" stroke-width="2.5"/>
|
|
<line x1="7" y1="36" x2="37" y2="36" stroke="#9A7B4F" stroke-width="2.5"/>
|
|
<line x1="8" y1="48" x2="34" y2="48" stroke="#9A7B4F" stroke-width="2.5"/>
|
|
<!-- 细致的编织纹理 (纵向) -->
|
|
<line x1="12" y1="0" x2="15" y2="55" stroke="#9A7B4F" stroke-width="2.5"/>
|
|
<line x1="22" y1="0" x2="20" y2="55" stroke="#9A7B4F" stroke-width="2.5"/>
|
|
<line x1="32" y1="0" x2="25" y2="55" stroke="#9A7B4F" stroke-width="2.5"/>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- 前轮 (带旋转与模糊特效) -->
|
|
<g transform="translate(850, 600)" filter="url(#lightShadow)">
|
|
<g class="wheel">
|
|
<circle cx="0" cy="0" r="110" fill="none" stroke="#1c1c1c" stroke-width="20" />
|
|
<circle cx="0" cy="0" r="120" fill="none" stroke="#000" stroke-width="2" stroke-dasharray="6 6" />
|
|
<circle cx="0" cy="0" r="98" fill="none" stroke="#F8FAFC" stroke-width="6" />
|
|
<circle cx="0" cy="0" r="92" fill="none" stroke="url(#chrome)" stroke-width="8" />
|
|
<!-- 辐条 -->
|
|
<g stroke="#94A3B8" stroke-width="2" opacity="0.8">
|
|
<line x1="0" y1="-92" x2="0" y2="92" />
|
|
<line x1="-92" y1="0" x2="92" y2="0" />
|
|
<line x1="-65" y1="-65" x2="65" y2="65" />
|
|
<line x1="-65" y1="65" x2="65" y2="-65" />
|
|
<line x1="-35" y1="-85" x2="35" y2="85" />
|
|
<line x1="-85" y1="-35" x2="85" y2="35" />
|
|
<line x1="-35" y1="85" x2="35" y2="-85" />
|
|
<line x1="-85" y1="35" x2="85" y2="-35" />
|
|
</g>
|
|
<!-- 极速行驶的光环特效层 -->
|
|
<circle cx="0" cy="0" r="60" fill="none" stroke="#E2E8F0" stroke-width="120" stroke-dasharray="10 30" opacity="0.1" />
|
|
<circle cx="0" cy="0" r="14" fill="url(#chrome)" />
|
|
</g>
|
|
</g>
|
|
|
|
|
|
<!-- ================= 动感细节与环境装饰 ================= -->
|
|
|
|
<!-- 车轮卷起的飞沙 (动画) -->
|
|
<g fill="#D4A352" opacity="0.9">
|
|
<!-- 后轮沙尘 -->
|
|
<g class="sand" style="animation-delay: 0s;"><circle cx="280" cy="700" r="6" /></g>
|
|
<g class="sand" style="animation-delay: -0.15s;"><circle cx="250" cy="680" r="4.5" /></g>
|
|
<g class="sand" style="animation-delay: -0.3s;"><circle cx="230" cy="715" r="7" /></g>
|
|
<g class="sand" style="animation-delay: -0.45s;"><circle cx="200" cy="670" r="3" /></g>
|
|
<g class="sand" style="animation-delay: -0.6s;"><circle cx="260" cy="660" r="5" /></g>
|
|
<!-- 前轮沙尘 -->
|
|
<g class="sand" style="animation-delay: -0.2s;"><circle cx="780" cy="700" r="5" /></g>
|
|
<g class="sand" style="animation-delay: -0.5s;"><circle cx="750" cy="710" r="4" /></g>
|
|
</g>
|
|
|
|
<!-- 前景速度线 / 风影 -->
|
|
<g stroke="#FFFFFF" stroke-linecap="round" opacity="0.5">
|
|
<line x1="800" y1="400" x2="1100" y2="400" stroke-width="5" class="speed" style="animation-delay: 0.3s; animation-duration: 1.5s;" />
|
|
<line x1="200" y1="500" x2="500" y2="500" stroke-width="3" class="speed" style="animation-delay: 1s; animation-duration: 2.2s;" />
|
|
</g>
|
|
|
|
<!-- 欢呼助威的小螃蟹 -->
|
|
<g transform="translate(180, 720)" filter="url(#lightShadow)">
|
|
<!-- 挥舞的八条腿 -->
|
|
<path d="M -15 0 Q -25 -10 -30 5" fill="none" stroke="#E11D48" stroke-width="3" stroke-linecap="round"/>
|
|
<path d="M -10 5 Q -20 0 -25 15" fill="none" stroke="#E11D48" stroke-width="3" stroke-linecap="round"/>
|
|
<path d="M 15 0 Q 25 -10 30 5" fill="none" stroke="#E11D48" stroke-width="3" stroke-linecap="round"/>
|
|
<path d="M 10 5 Q 20 0 25 15" fill="none" stroke="#E11D48" stroke-width="3" stroke-linecap="round"/>
|
|
<!-- 举起的大钳子 -->
|
|
<path d="M -10 -5 Q -25 -25 -10 -30" fill="none" stroke="#E11D48" stroke-width="4" stroke-linecap="round"/>
|
|
<circle cx="-10" cy="-30" r="6" fill="#E11D48"/>
|
|
<path d="M -10 -30 L -18 -40 L -3 -35 Z" fill="#E11D48"/>
|
|
|
|
<path d="M 10 -5 Q 25 -25 10 -30" fill="none" stroke="#E11D48" stroke-width="4" stroke-linecap="round"/>
|
|
<circle cx="10" cy="-30" r="6" fill="#E11D48"/>
|
|
<path d="M 10 -30 L 18 -40 L 3 -35 Z" fill="#E11D48"/>
|
|
|
|
<!-- 螃蟹身体和眼睛 -->
|
|
<ellipse cx="0" cy="0" rx="18" ry="12" fill="#BE123C" />
|
|
<circle cx="-6" cy="-10" r="2.5" fill="#FFFFFF" />
|
|
<circle cx="6" cy="-10" r="2.5" fill="#FFFFFF" />
|
|
<circle cx="-6" cy="-10" r="1.5" fill="#000000" />
|
|
<circle cx="6" cy="-10" r="1.5" fill="#000000" />
|
|
</g>
|
|
|
|
<!-- 艳丽的海星 -->
|
|
<g transform="translate(1020, 700) rotate(20) scale(0.9)" filter="url(#lightShadow)">
|
|
<path d="M 0 -20 L 5 -5 L 20 -5 L 8 5 L 12 20 L 0 10 L -12 20 L -8 5 L -20 -5 L -5 -5 Z" fill="#F43F5E" stroke="#9F1239" stroke-width="2" stroke-linejoin="round" />
|
|
<circle cx="0" cy="0" r="2.5" fill="#FFF" />
|
|
<circle cx="0" cy="-9" r="1.5" fill="#FFF" opacity="0.8"/>
|
|
<circle cx="9" cy="-2" r="1.5" fill="#FFF" opacity="0.8"/>
|
|
<circle cx="-9" cy="-2" r="1.5" fill="#FFF" opacity="0.8"/>
|
|
<circle cx="6" cy="9" r="1.5" fill="#FFF" opacity="0.8"/>
|
|
<circle cx="-6" cy="9" r="1.5" fill="#FFF" opacity="0.8"/>
|
|
</g>
|
|
|
|
<!-- 散落的贝壳 -->
|
|
<path d="M 80 650 Q 90 640, 100 650 C 95 655, 85 655, 80 650 Z" fill="#F8FAFC" stroke="#CBD5E1" stroke-width="1.5" />
|
|
<path d="M 900 680 Q 910 670, 915 685 C 905 690, 895 685, 900 680 Z" fill="#FFEDD5" stroke="#FDBA74" stroke-width="1.5" />
|
|
|
|
<!-- ================= 电影级全局滤镜层 ================= -->
|
|
<!-- 暗角效果 (增强聚焦感) -->
|
|
<rect width="1200" height="800" fill="url(#vignette)" style="pointer-events:none;" />
|
|
<!-- 落日暖色叠加 -->
|
|
<rect width="1200" height="800" fill="#FF9800" opacity="0.08" style="mix-blend-mode: color-burn; pointer-events:none;" />
|
|
<!-- 海风冷色叠加 -->
|
|
<rect width="1200" height="800" fill="#2DD4BF" opacity="0.04" style="mix-blend-mode: overlay; pointer-events:none;" />
|
|
|
|
</svg>
|