153 lines
6.5 KiB
XML
153 lines
6.5 KiB
XML
<svg width="390" height="844" viewBox="0 0 390 844" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- 定义渐变 -->
|
||
<defs>
|
||
<!-- 背景渐变 -->
|
||
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#F0F0F3;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#E8E8EC;stop-opacity:1" />
|
||
</linearGradient>
|
||
|
||
<!-- 品牌紫色渐变 -->
|
||
<linearGradient id="brandGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#6366F1;stop-opacity:1" />
|
||
</linearGradient>
|
||
|
||
<!-- 呼吸光效 -->
|
||
<radialGradient id="breathGlow" cx="50%" cy="50%" r="50%">
|
||
<stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:0.3" />
|
||
<stop offset="50%" style="stop-color:#6366F1;stop-opacity:0.15" />
|
||
<stop offset="100%" style="stop-color:#6366F1;stop-opacity:0" />
|
||
</radialGradient>
|
||
|
||
<!-- 卡片阴影 -->
|
||
<filter id="cardShadow" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur in="SourceAlpha" stdDeviation="8"/>
|
||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||
<feComponentTransfer>
|
||
<feFuncA type="linear" slope="0.1"/>
|
||
</feComponentTransfer>
|
||
<feMerge>
|
||
<feMergeNode/>
|
||
<feMergeNode in="SourceGraphic"/>
|
||
</feMerge>
|
||
</filter>
|
||
|
||
<!-- 呼吸动画 -->
|
||
<animate
|
||
id="breathe"
|
||
attributeName="r"
|
||
values="80;88;80"
|
||
dur="1.5s"
|
||
repeatCount="indefinite"/>
|
||
</defs>
|
||
|
||
<!-- 背景 -->
|
||
<rect width="390" height="844" fill="url(#bgGradient)"/>
|
||
|
||
<!-- 导航栏区域 -->
|
||
<g id="navbar">
|
||
<!-- 设置按钮 -->
|
||
<circle cx="350" cy="60" r="20" fill="#FFFFFF" opacity="0.6"/>
|
||
<path d="M 345 60 L 350 55 L 355 60 M 345 60 L 350 65 L 355 60" stroke="#2D2D3A" stroke-width="2" stroke-linecap="round" fill="none" transform="rotate(90 350 60)"/>
|
||
</g>
|
||
|
||
<!-- 英雄区域 - 从顶部开始 -->
|
||
<g id="heroSection" transform="translate(0, 120)">
|
||
<!-- 呼吸光效背景 -->
|
||
<circle cx="195" cy="180" r="80" fill="url(#breathGlow)" opacity="0.4">
|
||
<animate attributeName="r" values="80;88;80" dur="1.5s" repeatCount="indefinite"/>
|
||
<animate attributeName="opacity" values="0.3;0.5;0.3" dur="1.5s" repeatCount="indefinite"/>
|
||
</circle>
|
||
|
||
<!-- Live Photo 图标 -->
|
||
<g id="icon" transform="translate(195, 180)">
|
||
<!-- 外圈 -->
|
||
<circle cx="0" cy="0" r="44" fill="url(#brandGradient)" opacity="0.15"/>
|
||
<circle cx="0" cy="0" r="40" fill="url(#brandGradient)"/>
|
||
|
||
<!-- LIVE 符号 -->
|
||
<circle cx="-20" cy="0" r="3" fill="#FFFFFF"/>
|
||
<circle cx="0" cy="0" r="3" fill="#FFFFFF"/>
|
||
<circle cx="20" cy="0" r="3" fill="#FFFFFF"/>
|
||
|
||
<!-- 播放三角形 -->
|
||
<path d="M -5 -8 L 8 0 L -5 8 Z" fill="#FFFFFF" opacity="0.9"/>
|
||
</g>
|
||
|
||
<!-- 标题文字 -->
|
||
<text x="195" y="290" text-anchor="middle" font-family="-apple-system, SF Pro Display" font-size="52" font-weight="600" fill="#2D2D3A" letter-spacing="-1">
|
||
Create Magic
|
||
</text>
|
||
|
||
<!-- 副标题 -->
|
||
<text x="195" y="330" text-anchor="middle" font-family="-apple-system, PingFang SC" font-size="17" font-weight="400" fill="#6B6B7B" opacity="0.8">
|
||
将瞬间定格为永恒
|
||
</text>
|
||
|
||
<!-- 手势提示 -->
|
||
<g id="swipeHint" transform="translate(195, 390)">
|
||
<!-- 上滑箭头 -->
|
||
<path d="M 0 10 L 0 -5 M -6 1 L 0 -5 L 6 1" stroke="url(#brandGradient)" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.4">
|
||
<animate attributeName="opacity" values="0.3;0.7;0.3" dur="1.5s" repeatCount="indefinite"/>
|
||
<animate attributeName="transform" values="translate(0,0);translate(0,-4);translate(0,0)" dur="1.5s" repeatCount="indefinite"/>
|
||
</path>
|
||
|
||
<!-- 提示文字 -->
|
||
<text y="28" text-anchor="middle" font-family="-apple-system" font-size="13" fill="#6B6B7B" opacity="0.5">
|
||
<animate attributeName="opacity" values="0.4;0.6;0.4" dur="1.5s" repeatCount="indefinite"/>
|
||
Swipe up to begin
|
||
</text>
|
||
</g>
|
||
</g>
|
||
|
||
<!-- 示例视频库区域 -->
|
||
<g id="exampleGallery" transform="translate(0, 580)">
|
||
<!-- 区域标题 -->
|
||
<text x="24" y="0" font-family="-apple-system, PingFang SC" font-size="17" font-weight="600" fill="#2D2D3A">
|
||
从这些开始
|
||
</text>
|
||
|
||
<!-- 示例视频卡片 -->
|
||
<g id="exampleCards" transform="translate(0, 20)">
|
||
<!-- 卡片1：日落海浪 -->
|
||
<g transform="translate(24, 0)">
|
||
<rect width="80" height="106" rx="12" fill="#FFFFFF" filter="url(#cardShadow)"/>
|
||
<rect x="6" y="6" width="68" height="68" rx="8" fill="url(#brandGradient)" opacity="0.2"/>
|
||
<text x="40" y="90" text-anchor="middle" font-family="-apple-system, PingFang SC" font-size="12" fill="#2D2D3A">日落海浪</text>
|
||
</g>
|
||
|
||
<!-- 卡片2：城市夜景 -->
|
||
<g transform="translate(116, 0)">
|
||
<rect width="80" height="106" rx="12" fill="#FFFFFF" filter="url(#cardShadow)"/>
|
||
<rect x="6" y="6" width="68" height="68" rx="8" fill="url(#brandGradient)" opacity="0.25"/>
|
||
<text x="40" y="90" text-anchor="middle" font-family="-apple-system, PingFang SC" font-size="12" fill="#2D2D3A">城市夜景</text>
|
||
</g>
|
||
|
||
<!-- 卡片3：雨滴玻璃 -->
|
||
<g transform="translate(208, 0)">
|
||
<rect width="80" height="106" rx="12" fill="#FFFFFF" filter="url(#cardShadow)"/>
|
||
<rect x="6" y="6" width="68" height="68" rx="8" fill="url(#brandGradient)" opacity="0.3"/>
|
||
<text x="40" y="90" text-anchor="middle" font-family="-apple-system, PingFang SC" font-size="12" fill="#2D2D3A">雨滴玻璃</text>
|
||
</g>
|
||
|
||
<!-- 卡片4：烟花绽放 -->
|
||
<g transform="translate(300, 0)">
|
||
<rect width="66" height="106" rx="12" fill="#FFFFFF" filter="url(#cardShadow)"/>
|
||
<rect x="6" y="6" width="54" height="68" rx="8" fill="url(#brandGradient)" opacity="0.35"/>
|
||
<text x="33" y="90" text-anchor="middle" font-family="-apple-system, PingFang SC" font-size="12" fill="#2D2D3A">烟花</text>
|
||
</g>
|
||
</g>
|
||
|
||
<!-- 次要操作按钮 -->
|
||
<text x="195" y="150" text-anchor="middle" font-family="-apple-system, PingFang SC" font-size="15" fill="url(#brandGradient)" opacity="0.6">
|
||
或选择自己的视频
|
||
</text>
|
||
</g>
|
||
|
||
<!-- 底部说明文字 -->
|
||
<text x="195" y="800" text-anchor="middle" font-family="-apple-system" font-size="11" fill="#6B6B7B" opacity="0.4">
|
||
Live Photo Studio · 极简高级感设计方案
|
||
</text>
|
||
</svg>
|