zhushanwen321.github.io/logo-preview.html at master · zhushanwen321/zhushanwen321.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo 预览 - 连贯起伏</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #0a0a0a; color: #e2e8f0; font-family: system-ui, sans-serif; padding: 40px; }
  h1 { font-size: 20px; color: #888; margin-bottom: 12px; text-align: center; }
  p { font-size: 14px; color: #666; margin-bottom: 40px; text-align: center; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; max-width: 1100px; margin: 0 auto; }
  .card { background: #111; border: 1px solid #222; border-radius: 12px; padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; transition: border-color .2s; }
  .card:hover { border-color: #444; }
  .card.selected { border-color: #3b82f6 !important; }
  .label { font-size: 13px; color: #888; text-align: center; }
  .desc { font-size: 11px; color: #555; text-align: center; }
  .use-btn { background: #222; border: 1px solid #333; color: #aaa; border-radius: 6px; padding: 6px 16px; font-size: 12px; cursor: pointer; transition: all .2s; }
  .use-btn:hover { background: #333; color: #fff; border-color: #555; }
  .card.selected .use-btn { background: #3b82f6; color: #fff; border-color: #3b82f6; }
</style>
</head>
<body>
<h1>Zz 起伏变体</h1>
<p>中间 zswsz 有连贯波浪起伏感</p>
<div class="grid">

  <!-- A: 整体正弦波 y 起伏，字号不变 -->
  <div class="card" data-idx="A">
    <svg width="200" height="40" viewBox="0 0 200 40" fill="none">
      <!-- 左侧 ZZzz：强到弱 -->
      <text x="0"  y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
      <text x="22" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
      <text x="44" y="22" font-family="monospace" font-size="15" fill="#60a5fa" opacity="0.7">z</text>
      <!-- 中间 zswsz：连贯波浪起伏 -->
      <text x="74" y="16" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.35">z</text>
      <text x="86" y="19" font-family="monospace" font-size="12" fill="#3b82f6" opacity="0.4">s</text>
      <text x="98" y="24" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.45">w</text>
      <text x="114" y="19" font-family="monospace" font-size="12" fill="#3b82f6" opacity="0.4">s</text>
      <text x="126" y="16" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.35">z</text>
      <!-- 右侧 zZ：弱到强 -->
      <text x="154" y="22" font-family="monospace" font-size="15" fill="#60a5fa" opacity="0.7">z</text>
      <text x="172" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
      <text x="194" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
    </svg>
    <span class="label">A: 对称波浪</span>
    <span class="desc">z↘sws↗z，中间 w 最深，两侧对称升起</span>
    <button class="use-btn">选择此方案</button>
  </div>

  <!-- B: 中间更平滑的渐变，字号也跟起伏联动 -->
  <div class="card" data-idx="B">
    <svg width="200" height="40" viewBox="0 0 200 40" fill="none">
      <!-- 左 ZZzz -->
      <text x="0"  y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
      <text x="22" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
      <text x="44" y="23" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.7">z</text>
      <text x="60" y="20" font-family="monospace" font-size="12" fill="#60a5fa" opacity="0.5">z</text>
      <!-- 中间 zswsz：字号也随波浪渐变 -->
      <text x="74" y="17" font-family="monospace" font-size="9"  fill="#60a5fa" opacity="0.38">z</text>
      <text x="84" y="19" font-family="monospace" font-size="10" fill="#3b82f6" opacity="0.38">s</text>
      <text x="96" y="24" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.45">w</text>
      <text x="112" y="19" font-family="monospace" font-size="10" fill="#3b82f6" opacity="0.38">s</text>
      <text x="124" y="17" font-family="monospace" font-size="9"  fill="#60a5fa" opacity="0.38">z</text>
      <!-- 右 zzZ Z -->
      <text x="136" y="20" font-family="monospace" font-size="12" fill="#60a5fa" opacity="0.5">z</text>
      <text x="152" y="23" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.7">z</text>
      <text x="172" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
      <text x="194" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
    </svg>
    <span class="label">B: 字号联动波浪</span>
    <span class="desc">字号大小也随 y 起伏变化，更有机</span>
    <button class="use-btn">选择此方案</button>
  </div>

  <!-- C: 中间加一条淡色波浪线贯穿 zswsz -->
  <div class="card" data-idx="C">
    <svg width="200" height="44" viewBox="0 0 200 44" fill="none">
      <!-- 背景波浪线贯穿全程 -->
      <path d="M0 28 Q30 28, 50 24 Q70 20, 90 20 Q110 20, 130 24 Q150 28, 170 28 Q190 28, 200 28" stroke="#3b82f6" stroke-width="0.6" fill="none" opacity="0.15"/>
      <!-- 左 ZZzz -->
      <text x="0"  y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
      <text x="22" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
      <text x="44" y="22" font-family="monospace" font-size="15" fill="#60a5fa" opacity="0.7">z</text>
      <text x="60" y="19" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.5">z</text>
      <!-- 中间 zswsz -->
      <text x="74" y="17" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.4">z</text>
      <text x="86" y="20" font-family="monospace" font-size="12" fill="#3b82f6" opacity="0.42">s</text>
      <text x="98" y="25" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.48">w</text>
      <text x="114" y="20" font-family="monospace" font-size="12" fill="#3b82f6" opacity="0.42">s</text>
      <text x="126" y="17" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.4">z</text>
      <!-- 右 zzZ Z -->
      <text x="138" y="19" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.5">z</text>
      <text x="154" y="22" font-family="monospace" font-size="15" fill="#60a5fa" opacity="0.7">z</text>
      <text x="172" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
      <text x="194" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
    </svg>
    <span class="label">C: 波浪线托底</span>
    <span class="desc">一条淡色波浪线贯穿，视觉串联所有字母</span>
    <button class="use-btn">选择此方案</button>
  </div>

  <!-- D: 完全同色同系，靠字号+透明度区分 -->
  <div class="card" data-idx="D">
    <svg width="200" height="40" viewBox="0 0 200 40" fill="none">
      <text x="0"  y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa" opacity="1">Z</text>
      <text x="22" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa" opacity="0.9">Z</text>
      <text x="44" y="22" font-family="monospace" font-size="15" fill="#60a5fa" opacity="0.65">z</text>
      <text x="60" y="19" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.45">z</text>
      <text x="74" y="16" font-family="monospace" font-size="9"  fill="#60a5fa" opacity="0.32">z</text>
      <text x="84" y="18" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.32">s</text>
      <text x="96" y="22" font-family="monospace" font-size="13" fill="#60a5fa" opacity="0.38">w</text>
      <text x="112" y="18" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.32">s</text>
      <text x="124" y="16" font-family="monospace" font-size="9"  fill="#60a5fa" opacity="0.32">z</text>
      <text x="138" y="19" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.45">z</text>
      <text x="154" y="22" font-family="monospace" font-size="15" fill="#60a5fa" opacity="0.65">z</text>
      <text x="172" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa" opacity="0.9">Z</text>
      <text x="194" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa" opacity="1">Z</text>
    </svg>
    <span class="label">D: 纯同色渐变</span>
    <span class="desc">全部同色，靠字号+透明度连续渐变，最统一</span>
    <button class="use-btn">选择此方案</button>
  </div>

</div>

<script>
var cards = document.querySelectorAll('.card');
cards.forEach(function(card) {
  var btn = card.querySelector('.use-btn');
  btn.addEventListener('click', function() {
    cards.forEach(function(c) { c.classList.remove('selected'); });
    card.classList.add('selected');
    var label = card.querySelector('.label').textContent;
    alert('已选择 ' + label);
  });
});
</script>
</body>
</html>