| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>渐变美学 · 樱粉雾蓝</title> |
| 6 | <style> |
| 7 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 8 | html, body { width: 1600px; height: 900px; overflow: hidden; font-family:"PingFang SC","Noto Sans SC","Helvetica Neue",sans-serif; } |
| 9 | .canvas { |
| 10 | width: 1600px; height: 900px; position: relative; color: #2E4B8F; |
| 11 | background: |
| 12 | radial-gradient(ellipse at 15% 20%, rgba(255,205,225,0.6) 0%, transparent 55%), |
| 13 | radial-gradient(ellipse at 85% 80%, rgba(124,150,255,0.4) 0%, transparent 55%), |
| 14 | linear-gradient(135deg, #FFF5F9 0%, #F5F0FF 50%, #EFEEFF 100%); |
| 15 | overflow: hidden; |
| 16 | } |
| 17 | |
| 18 | /* 大渐变球 */ |
| 19 | .orb { |
| 20 | position: absolute; border-radius: 50%; filter: blur(40px); |
| 21 | } |
| 22 | .orb1 { top: -150px; left: -100px; width: 600px; height: 600px; |
| 23 | background: radial-gradient(circle, #FFCDE1 0%, #FFB3D1 50%, transparent 75%); opacity: 0.7;} |
| 24 | .orb2 { bottom: -200px; right: -100px; width: 700px; height: 700px; |
| 25 | background: radial-gradient(circle, #7C96FF 0%, #A8B8FF 50%, transparent 75%); opacity: 0.55;} |
| 26 | .orb3 { top: 350px; left: 600px; width: 400px; height: 400px; |
| 27 | background: radial-gradient(circle, #FF6B9D 0%, transparent 70%); opacity: 0.3;} |
| 28 | |
| 29 | /* 星星 */ |
| 30 | .star { position: absolute; } |
| 31 | .s1 { top: 120px; left: 900px; } |
| 32 | .s2 { top: 280px; left: 1180px; } |
| 33 | .s3 { top: 480px; left: 820px; } |
| 34 | .s4 { top: 640px; left: 1280px; } |
| 35 | |
| 36 | /* 月亮 */ |
| 37 | .moon { |
| 38 | position: absolute; top: 100px; right: 220px; |
| 39 | width: 130px; height: 130px; border-radius: 50%; |
| 40 | background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #FFCDE1 60%, #FFB3D1 100%); |
| 41 | box-shadow: 0 0 60px rgba(255,205,225,0.7); |
| 42 | } |
| 43 | |
| 44 | /* 标签 */ |
| 45 | .tag { |
| 46 | position: absolute; top: 70px; left: 140px; z-index:5; |
| 47 | font-size: 16px; letter-spacing: 6px; font-weight: 600; |
| 48 | background: linear-gradient(90deg, #FF6B9D, #7C96FF); |
| 49 | -webkit-background-clip: text; background-clip: text; color: transparent; |
| 50 | } |
| 51 | .tag::before { content:""; display:inline-block; width:24px; height:2px; background:#FF6B9D; vertical-align:middle; margin-right:12px; } |
| 52 | |
| 53 | /* 标题 */ |
| 54 | .title { position: absolute; top: 200px; left: 140px; z-index:5; } |
| 55 | .main-title { |
| 56 | font-size: 124px; font-weight: 800; line-height: 1.05; |
| 57 | letter-spacing: 6px; |
| 58 | background: linear-gradient(120deg, #FF6B9D 0%, #A8B8FF 50%, #2E4B8F 100%); |
| 59 | -webkit-background-clip: text; background-clip: text; color: transparent; |
| 60 | } |
| 61 | .sub-title { |
| 62 | font-size: 28px; color: #2E4B8F; letter-spacing: 10px; |
| 63 | margin-top: 28px; font-weight: 400; opacity: 0.85; |
| 64 | } |
| 65 | .sub-title .pink { color: #FF6B9D; font-weight: 600; } |
| 66 | |
| 67 | /* 正文 */ |
| 68 | .body { |
| 69 | position: absolute; left: 140px; bottom: 220px; z-index:5; |
| 70 | width: 480px; font-size: 22px; line-height: 2.1; |
| 71 | color: #2E4B8F; letter-spacing: 1.5px; font-weight: 400; |
| 72 | } |
| 73 | .body strong { color: #FF6B9D; font-weight: 600; } |
| 74 | |
| 75 | /* 色卡渐变 */ |
| 76 | .gradient-bar { |
| 77 | position: absolute; left: 140px; bottom: 90px; z-index:5; |
| 78 | width: 540px; height: 70px; border-radius: 35px; |
| 79 | background: linear-gradient(90deg, #FFCDE1 0%, #FFB3D1 25%, #A8B8FF 60%, #7C96FF 80%, #2E4B8F 100%); |
| 80 | display: flex; align-items: center; justify-content: space-between; |
| 81 | padding: 0 30px; |
| 82 | } |
| 83 | .gradient-bar span { font-size: 13px; color: #FFFFFF; letter-spacing: 1px; font-family:"Helvetica Neue",sans-serif; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.2);} |
| 84 | |
| 85 | /* 右侧卡 */ |
| 86 | .card { |
| 87 | position: absolute; top: 280px; right: 140px; z-index:5; |
| 88 | width: 340px; padding: 36px; border-radius: 28px; |
| 89 | background: rgba(255,255,255,0.6); |
| 90 | backdrop-filter: blur(10px); |
| 91 | border: 1px solid rgba(255,255,255,0.8); |
| 92 | } |
| 93 | .card h3 { font-size: 26px; color: #2E4B8F; letter-spacing: 3px; margin-bottom: 20px; } |
| 94 | .card .row { display: flex; align-items: center; margin-bottom: 16px; } |
| 95 | .card .chip { width: 36px; height: 36px; border-radius: 12px; margin-right: 16px; } |
| 96 | .card .info .n { font-size: 18px; color: #2E4B8F; font-weight: 600; letter-spacing: 2px;} |
| 97 | .card .info .h { font-size: 13px; color: #3A2D5C; opacity: 0.7; font-family:"Helvetica Neue",sans-serif; } |
| 98 | |
| 99 | /* 底部 */ |
| 100 | .footer { |
| 101 | position: absolute; right: 140px; bottom: 50px; z-index:5; |
| 102 | font-size: 14px; letter-spacing: 4px; font-weight: 600; |
| 103 | background: linear-gradient(90deg, #FF6B9D, #7C96FF); |
| 104 | -webkit-background-clip: text; background-clip: text; color: transparent; |
| 105 | } |
| 106 | </style> |
| 107 | </head> |
| 108 | <body> |
| 109 | <div class="canvas"> |
| 110 | <div class="orb orb1"></div> |
| 111 | <div class="orb orb2"></div> |
| 112 | <div class="orb orb3"></div> |
| 113 | <div class="moon"></div> |
| 114 | |
| 115 | <svg class="star s1" width="28" height="28" viewBox="0 0 28 28"><path d="M14,2 L16,12 L26,14 L16,16 L14,26 L12,16 L2,14 L12,12 Z" fill="#FF6B9D" opacity="0.8"/></svg> |
| 116 | <svg class="star s2" width="20" height="20" viewBox="0 0 20 20"><path d="M10,1 L11,9 L19,10 L11,11 L10,19 L9,11 L1,10 L9,9 Z" fill="#7C96FF"/></svg> |
| 117 | <svg class="star s3" width="16" height="16" viewBox="0 0 16 16"><path d="M8,1 L9,7 L15,8 L9,9 L8,15 L7,9 L1,8 L7,7 Z" fill="#FFCDE1"/></svg> |
| 118 | <svg class="star s4" width="22" height="22" viewBox="0 0 22 22"><path d="M11,1 L12,10 L21,11 L12,12 L11,21 L10,12 L1,11 L10,10 Z" fill="#A8B8FF"/></svg> |
| 119 | |
| 120 | <div class="tag">DREAMY GRADIENT · 小众粉系</div> |
| 121 | |
| 122 | <div class="title"> |
| 123 | <div class="main-title">樱粉雾蓝<br>梦幻渐变</div> |
| 124 | <div class="sub-title">清晨黄昏 <span class="pink">·</span> 粉与蓝的温柔接吻</div> |
| 125 | </div> |
| 126 | |
| 127 | <div class="body"> |
| 128 | 淡樱粉如<strong>晨曦初绽</strong>，<br> |
| 129 | 雾紫蓝似<strong>夜幕将临</strong>。<br> |
| 130 | 在交界处，<br> |
| 131 | 所有浪漫都温柔地相遇。 |
| 132 | </div> |
| 133 | |
| 134 | <div class="gradient-bar"> |
| 135 | <span>#FFCDE1</span><span>#FFB3D1</span><span>#A8B8FF</span><span>#7C96FF</span><span>#2E4B8F</span> |
| 136 | </div> |
| 137 | |
| 138 | <div class="card"> |
| 139 | <h3>渐变档案</h3> |
| 140 | <div class="row"><div class="chip" style="background:linear-gradient(135deg,#FFCDE1,#FF6B9D)"></div><div class="info"><div class="n">樱粉霞</div><div class="h">#FFCDE1 → #FF6B9D</div></div></div> |
| 141 | <div class="row"><div class="chip" style="background:linear-gradient(135deg,#A8B8FF,#7C96FF)"></div><div class="info"><div class="n">雾紫蓝</div><div class="h">#A8B8FF → #7C96FF</div></div></div> |
| 142 | <div class="row"><div class="chip" style="background:linear-gradient(135deg,#7C96FF,#2E4B8F)"></div><div class="info"><div class="n">深靛蓝</div><div class="h">#7C96FF → #2E4B8F</div></div></div> |
| 143 | </div> |
| 144 | |
| 145 | <div class="footer">DREAMY PINK GRADIENT · VOL. 12</div> |
| 146 | </div> |
| 147 | </body> |
| 148 | </html> |
| 149 |