任天堂Switch动画SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500"> <defs> <style> @keyframes leftJoySnap { 0% { transform: translate(-80px, 0); opacity: 0; } 60% { transform: translate(10px, 0); opacity: 1; } 70% { transform: translate(-5px, 0); } 80% { transform: translate(3px, 0); } 100% { transform: translate(0, 0); opacity: 1; } } @keyframes rightJoySnap { 0% { transform: translate(80px, 0); opacity: 0; } 60% { transform: translate(-10px, 0); opacity: 1; } 70% { transform: translate(5px, 0); } 80% { transform: translate(-3px, 0); } 100% { transform: translate(0, 0); opacity: 1; } } @keyframes screenBoot { 0% { opacity: 0; } 30% { opacity: 0; } 50% { opacity: 0.3; } 70% { opacity: 0.7; } 100% { opacity: 1; } } @keyframes logoPop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 75% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } } @keyframes bootGlow { 0% { opacity: 0; } 40% { opacity: 0.5; } 100% { opacity: 0; } } @keyframes screenShine { 0% { transform: translateX(-100%); } 40% { transform: translateX(100%); } 100% { transform: translateX(100%); } } .left-joy { animation: leftJoySnap 1.2s ease-out forwards; } .right-joy { animation: rightJoySnap 1.2s ease-out forwards; } .screen-content { animation: screenBoot 1.5s ease-out forwards; opacity: 0; } .logo { animation: logoPop 0.8s ease-out 1.5s forwards; transform-origin: center; opacity: 0; } .glow { animation: bootGlow 1s ease-out 0.8s forwards; } .shine { animation: screenShine 1.2s ease-out 1.5s forwards; } </style> </defs> <!-- Background --> <rect width="800" height="500" fill="#1a1a2e" rx="10"/> <!-- Dock/Stand behind console --> <rect x="290" y="260" width="220" height="120" rx="8" fill="#2d2d3d" stroke="#444" stroke-width="2"/> <rect x="300" y="270" width="200" height="100" rx="5" fill="#252535"/> <!-- Console Body --> <rect x="270" y="120" width="260" height="160" rx="12" fill="#2a2a2a" stroke="#555" stroke-width="2"/> <!-- Screen bezel --> <rect x="280" y="130" width="240" height="140" rx="6" fill="#111"/> <!-- Screen --> <rect x="285" y="135" width="230" height="130" rx="4" fill="#0a0a1a"/> <!-- Screen boot glow --> <rect x="285" y="135" width="230" height="130" rx="4" fill="#4a4aff" class="glow"/> <!-- Screen shine effect --> <rect x="285" y="135" width="230" height="130" rx="4" fill="url(#shineGrad)" class="shine" opacity="0.3"/> <!-- Screen content --> <g class="screen-content"> <!-- Nintendo Switch logo on screen --> <g class="logo"> <!-- Red joy-con shape in logo --> <rect x="340" y="175" width="18" height="50" rx="4" fill="#e60012"/> <!-- Blue joy-con shape in logo --> <rect x="442" y="175" width="18" height="50" rx="4" fill="#00b9f2"/> <!-- Screen part of logo --> <rect x="358" y="175" width="84" height="50" rx="4" fill="#fff"/> <!-- "Nintendo Switch" text --> <text x="400" y="205" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#e60012">Nintendo</text> <text x="400" y="220" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" fill="#333">SWITCH</text> </g> </g> <!-- Left Joy-Con --> <g class="left-joy"> <!-- Main body --> <rect x="245" y="120" width="30" height="160" rx="8" fill="#e60012" stroke="#cc0000" stroke-width="1.5"/> <!-- Stick --> <circle cx="260" cy="150" r="8" fill="#cc0000" stroke="#aa0000" stroke-width="1"/> <circle cx="260" cy="150" r="4" fill="#aa0000"/> <!-- D-pad --> <rect x="253" y="185" width="14" height="4" rx="1" fill="#cc0000"/> <rect x="258" y="180" width="4" height="14" rx="1" fill="#cc0000"/> <!-- Buttons --> <rect x="253" y="220" width="6" height="6" rx="1" fill="#cc0000"/> <rect x="262" y="220" width="6" height="6" rx="1" fill="#cc0000"/> <rect x="253" y="230" width="6" height="6" rx="1" fill="#cc0000"/> <rect x="262" y="230" width="6" height="6" rx="1" fill="#cc0000"/> <!-- Rail connector --> <rect x="272" y="140" width="5" height="120" rx="2" fill="#999"/> <!-- SL/SR buttons --> <rect x="242" y="135" width="4" height="12" rx="2" fill="#aa0000"/> <rect x="242" y="250" width="4" height="12" rx="2" fill="#aa0000"/> </g> <!-- Right Joy-Con --> <g class="right-joy"> <!-- Main body --> <rect x="525" y="120" width="30" height="160" rx="8" fill="#00b9f2" stroke="#0099cc" stroke-width="1.5"/> <!-- Stick --> <circle cx="540" cy="150" r="8" fill="#0099cc" stroke="#0077aa" stroke-width="1"/> <circle cx="540" cy="150" r="4" fill="#0077aa"/> <!-- ABXY buttons --> <circle cx="548" cy="185" r="4" fill="#0099cc"/> <circle cx="538" cy="185" r="4" fill="#0099cc"/> <circle cx="543" cy="180" r="4" fill="#0099cc"/> <circle cx="543" cy="190" r="4" fill="#0099cc"/> <!-- Home button --> <circle cx="540" cy="220" r="5" fill="#0099cc" stroke="#0077aa" stroke-width="1"/> <!-- Plus button --> <rect x="543" y="232" width="8" height="4" rx="1" fill="#0099cc"/> <rect x="546" y="229" width="4" height="8" rx="1" fill="#0099cc"/> <!-- Rail connector --> <rect x="523" y="140" width="5" height="120" rx="2" fill="#999"/> <!-- SL/SR buttons --> <rect x="554" y="135" width="4" height="12" rx="2" fill="#0099cc"/> <rect x="554" y="250" width="4" height="12" rx="2" fill="#0099cc"/> </g> <!-- Console details --> <!-- Top edge --> <rect x="270" y="117" width="260" height="6" rx="3" fill="#333"/> <!-- Bottom edge --> <rect x="270" y="277" width="260" height="6" rx="3" fill="#333"/> <!-- Vent details on top --> <rect x="330" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="340" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="350" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="360" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="370" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="380" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="390" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="400" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="410" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="420" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="430" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="440" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="450" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="460" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="470" y="119" width="4" height="3" rx="1" fill="#444"/> <rect x="480" y="119" width="4" height="3" rx="1" fill="#444"/> <!-- Speaker grills --> <rect x="290" y="260" width="30" height="3" rx="1" fill="#333"/> <rect x="290" y="266" width="30" height="3" rx="1" fill="#333"/> <rect x="480" y="260" width="30" height="3" rx="1" fill="#333"/> <rect x="480" y="266" width="30" height="3" rx="1" fill="#333"/> <!-- USB-C port on bottom --> <rect x="390" y="280" width="20" height="4" rx="1" fill="#444"/> <!-- Shadow under console --> <ellipse cx="400" cy="385" rx="150" ry="10" fill="rgba(0,0,0,0.3)"/> <!-- Reflection on screen --> <rect x="285" y="135" width="230" height="130" rx="4" fill="url(#reflectionGrad)" opacity="0.15"/> <defs> <linearGradient id="shineGrad" x1="0" y1="0" x2="1" y2="0"> <stop offset="0%" stop-color="white" stop-opacity="0"/> <stop offset="50%" stop-color="white" stop-opacity="0.4"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </linearGradient> <linearGradient id="reflectionGrad" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="white" stop-opacity="0.1"/> <stop offset="50%" stop-color="white" stop-opacity="0"/> </linearGradient> </defs> </svg>