顶部一道渐变条，比整块渐变背景克制得多，又比纯色边框有记忆点。下面这套卡片共用一个骨架：:before 画顶部渐变线 + transform 做上下漂浮 + border-radius:14px 收圆角。在这个骨架上改配色和 hover，能延伸出四款气质完全不同的卡片——右侧窗口里是真实运行的效果，卡片会自己上下浮动。
01原版：浅色·玫红
一道 5px 的渐变装饰线
卡片本体极简：白底、1px 淡玫红边框、无阴影。所有视觉重量都压在顶部那道 5px 渐变条上，从玫红 hsl(315 74% 52%) 过渡到正红 hsl(357 80% 58%)。
:before绝对定位铺满顶部，不占文档流overflow:hidden让渐变条跟随圆角裁切animation上下 6px 循环漂浮，节奏 3.2s
用 HSL 而非 HEX 写色，改色相就能整体换色系，明度饱和度各自独立。
顶部渐变条卡片
顶部一道渐变装饰线，简洁有力。
卡片每 3.2 秒上下浮动一次
02变体一：深色版
深色版卡片
深底配玫红渐变条，对比更强烈。
深色底上玫红更跳
换底换字，渐变条不用动
只改三处就能转深色：背景 #1c2434、文字 #e9edf5、边框 hsl(315 30% 30%)。渐变条本身完全不用改——玫红在深底上反而更亮眼。
正文色记得同步调亮（这里用 hsl(315 10% 62%)），否则在深底上会糊成一片。深色版的边框可以比浅色版明显一些，深色底上太淡的边框等于没有。
03变体二：悬浮互动版
鼠标移入：漂浮暂停 + 渐变条加宽
这一版解决了一个隐藏冲突：卡片本身有漂浮动画，如果再加 hover 位移动画，两者会互相打架，hover 效果看不出来。解法是 animation-play-state:paused——悬停时先把漂浮冻住，再叠加阴影和加宽。
:before的height从 5px 过渡到 9px- 阴影用玫红半透明
rgba(214,45,110,.15)，和渐变条呼应 transition收窄成具体属性，避免all误触发
把鼠标移到右边窗口的卡片上试试。
悬浮互动版
鼠标移入：漂浮暂停、渐变条加宽、浮起阴影。
悬停时漂浮会暂停
04变体三：流光渐变条
流光渐变条
顶部渐变条横向流动，像一条光带。
光带 2.6 秒循环一次
让渐变条自己动起来
把渐变色写成三段：玫红 → 正红 → 玫红，首尾同色是关键——循环时才不会有跳帧的接缝。再配 background-size:200% 加位移动画，就成了一条流动的光带。
注意这里有两个动画同时跑：卡片漂浮在容器上，光带流动在 :before 上，互不干扰。想让光带快一点，改 2.6s 即可。
05多张并排：错峰漂浮
加一行 animation-delay
多张卡片并列时，如果所有卡片同步上下，会显得机械。给每张加不同的 animation-delay，节奏就错开了。
最稳的写法是直接写在标签上——用 :nth-of-type() 的话，一旦卡片不是父容器里连续的同级元素，序号就算错了。
右边窗口里三张卡片分别延迟 0s / 0.5s / 1s，能看到明显的波浪感。
第一张
延迟 0s。
第二张
延迟 0.5s。
第三张
延迟 1s。
三张错峰，形成波浪感
06四款参数对照
四款共用一套骨架，差异集中在底色、渐变条和 hover 上。改哪一处影响什么，直接查表。
| 参数 | 原版 / 变体取值 | 作用说明 |
|---|---|---|
| :before height | 5px（hover 9px） | 顶部渐变条粗细，这是整套卡片的视觉重心 |
| 渐变色 1 | hsl(315 74% 52%) | 玫红，改 H 值换色系：0 红 / 200 蓝 / 140 绿 |
| 渐变色 2 | hsl(357 80% 58%) | 正红，收尾色，与色 1 拉开 40 度色相 |
| border-radius | 14px | 卡片圆角，配合 overflow:hidden 裁切渐变条 |
| padding | 30px 22px 22px | 上内边距留大，给渐变条留出呼吸空间 |
| translateY | -6px | 漂浮幅度，超过 10px 会显得躁动 |
| animation 时长 | 3.2s | 漂浮周期，2.5–4s 区间最自然 |
| animation-delay | 0 / .5s / 1s | 多卡并排时错峰用，写在标签 style 里最稳 |
| background | #ffffff / #1c2434 | 卡片底色，深色版改 #1c2434 并同步调亮文字 |
| box-shadow | none / hover 时用 | 原版无阴影，互动版 hover 加玫红半透明阴影 |
换色最快的办法：只动
hsl() 里的第一个数字（色相）。玫红 315 → 蓝 210 → 青 185 → 翠绿 150，饱和度和明度保持不变，整套配色的浓淡关系是连贯的，不用逐个调。07常见问题
Q1：为什么加了 hover 位移没反应？
A1：因为漂浮的
animation 优先级高于 transition，两者都在改 transform，动画会一直覆盖 hover。解法是 hover 时先写 animation-play-state:paused 冻住漂浮，再叠加其它变化。Q2：渐变条两端被切掉了？
A2：检查父级有没有
overflow:hidden 之外的裁剪，或者卡片是否被挤到了很窄的容器里。:before 用的是 left:0;right:0，宽度完全跟随卡片，只要卡片有宽度就不会缺。Q3：深色版边框看不见？
A3：浅色版那套
hsl(315 52% 91%) 在深底上太淡了。深色版至少要用 hsl(315 30% 30%) 这个量级，明度压到 30% 左右才有存在感。Q4：流光版循环时有跳帧？
A4：渐变首尾必须是同一个颜色。写成
玫红 → 正红 → 玫红 才能无缝衔接，如果收尾色和起始色不同，每轮循环都会看到一次硬切。Q5：手机上看漂浮会不会晃得难受？
A5：触屏没有 hover，漂浮是唯一动效，6px 幅度在手机上偏大。可以加个媒体查询，窄屏时把幅度降到 3px 或直接关掉动画。
Q6：能放进侧边栏吗？
A6：可以，但要把
width:100% 保留——它会自适应小工具宽度。侧边栏通常比较窄，建议把 padding 收到 24px 16px 18px，标题字号降到 15px。08完整代码
四款各自独立，类名互不冲突（bw3_0 到 bw3_3），可以同页共存。按需复制，粘进「自定义 HTML」区块或小工具即可，WordPress 无需装插件。
① 原版 · 浅色玫红
<style>
.bw3_0{box-sizing:border-box;width:100%;position:relative;border-radius:14px;padding:30px 22px 22px;color:#1c2434;font-size:17px;background:#ffffff;border:1px solid hsl(315 52% 91%);box-shadow:none;overflow:hidden;transition:all .3s ease}
.bw3_0:before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:linear-gradient(90deg,hsl(315 74% 52%),hsl(357 80% 58%))}
.bw3_0-t{font-weight:700;margin:0 0 6px}
.bw3_0-d{margin:0;color:hsl(315 12% 45%);font-size:15px;line-height:1.7}
@keyframes bw3_0-mo{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bw3_0{animation:bw3_0-mo 3.2s ease-in-out infinite}
</style>
<div class="bw3_0"><p class="bw3_0-t">顶部渐变条卡片</p><p class="bw3_0-d">顶部一道渐变装饰线，简洁有力。</p></div>② 变体一 · 深色版
<style>
.bw3_1{box-sizing:border-box;width:100%;position:relative;border-radius:14px;padding:30px 22px 22px;color:#e9edf5;font-size:17px;background:#1c2434;border:1px solid hsl(315 30% 30%);box-shadow:none;overflow:hidden}
.bw3_1:before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:linear-gradient(90deg,hsl(315 74% 52%),hsl(357 80% 58%))}
.bw3_1-t{font-weight:700;margin:0 0 6px}
.bw3_1-d{margin:0;color:hsl(315 10% 62%);font-size:15px;line-height:1.7}
@keyframes bw3_1-mo{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bw3_1{animation:bw3_1-mo 3.2s ease-in-out infinite}
</style>
<div class="bw3_1"><p class="bw3_1-t">深色版卡片</p><p class="bw3_1-d">深底配玫红渐变条，对比更强烈。</p></div>③ 变体二 · 悬浮互动版
<style>
.bw3_2{box-sizing:border-box;width:100%;position:relative;border-radius:14px;padding:30px 22px 22px;color:#1c2434;font-size:17px;background:#ffffff;border:1px solid hsl(315 52% 91%);box-shadow:none;overflow:hidden;transition:box-shadow .3s ease,border-color .3s ease}
.bw3_2:before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:linear-gradient(90deg,hsl(315 74% 52%),hsl(357 80% 58%));transition:height .3s ease}
.bw3_2-t{font-weight:700;margin:0 0 6px}
.bw3_2-d{margin:0;color:hsl(315 12% 45%);font-size:15px;line-height:1.7}
@keyframes bw3_2-mo{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bw3_2{animation:bw3_2-mo 3.2s ease-in-out infinite}
.bw3_2:hover{animation-play-state:paused;box-shadow:0 8px 24px rgba(214,45,110,.15);border-color:hsl(315 55% 85%)}
.bw3_2:hover:before{height:9px}
</style>
<div class="bw3_2"><p class="bw3_2-t">悬浮互动版</p><p class="bw3_2-d">鼠标移入：漂浮暂停、渐变条加宽、浮起阴影。</p></div>④ 变体三 · 流光渐变条
<style>
.bw3_3{box-sizing:border-box;width:100%;position:relative;border-radius:14px;padding:30px 22px 22px;color:#1c2434;font-size:17px;background:#ffffff;border:1px solid hsl(315 52% 91%);box-shadow:none;overflow:hidden}
.bw3_3:before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:linear-gradient(90deg,hsl(315 74% 52%),hsl(357 80% 58%),hsl(315 74% 52%));background-size:200% 100%;animation:bw3_3-fl 2.6s linear infinite}
.bw3_3-t{font-weight:700;margin:0 0 6px}
.bw3_3-d{margin:0;color:hsl(315 12% 45%);font-size:15px;line-height:1.7}
@keyframes bw3_3-fl{0%{background-position:0% 0}100%{background-position:-200% 0}}
@keyframes bw3_3-mo{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bw3_3{animation:bw3_3-mo 3.2s ease-in-out infinite}
</style>
<div class="bw3_3"><p class="bw3_3-t">流光渐变条</p><p class="bw3_3-d">顶部渐变条横向流动，像一条光带。</p></div>⑤ 附加 · 错峰与窄屏收敛
<!-- 多张并排：直接在标签上写延迟，比 nth-of-type 稳 -->
<div class="bw3_0">第一张，延迟 0s</div>
<div class="bw3_0" style="animation-delay:.5s">第二张，延迟 0.5s</div>
<div class="bw3_0" style="animation-delay:1s">第三张，延迟 1s</div>
<!-- 窄屏收敛：把漂浮幅度降到 3px，或直接关掉 -->
<style>
@media(max-width:640px){
@keyframes bw3_0-mo{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
}
</style>复制去用时记得：类名
bw3_0 到 bw3_3 各管各的，四款可以放同一页；但同一款在同一页别放两份 CSS，否则动画会重复声明、延迟也会失效。用法建议：粘进「外观 → 小工具 → 自定义 HTML」，侧边栏常驻展示；或放进单篇文章的「自定义 HTML」区块做重点提示卡。
原创文章，如若转载，请注明出处：维形筑网https://wxzcw.com/66-2/