楼主
直接把CSS贴出来就可以了。
不会的就别问怎么参加了。
如果采纳了奖励1000积分！谢谢！
原帖: linux.sb/topic/13258 · 共 20 楼 · 标题快照 2026-08-17 20:17:45
直接把CSS贴出来就可以了。
不会的就别问怎么参加了。
如果采纳了奖励1000积分！谢谢！
我觉得还是之前那个点赞好
@LoseHisFeeling #1 之前的太低调了 很多人不知道 就这个吧 生活需要点刺激 优化一下很棒的
可以都保留吧，这个更有气氛，同样有些饼友可能希望低调点
@希希芙 #3 功能重复了 没必要啊
直接从楼上掉个大饼下来能做到吗😜
建议就是精简化一点，类似于投币，如果要做颜色的，就和主题色对应一下，然后弹幕不要遮挡正文（或者设置开关），然后弄一个小格子放打赏的话，可以是滚动那种（或者显示前多少名）
@xxxd #5 必须能啊 哈哈 AI啥不会啊
@痛失姓名的站长 #4 但是现在不能给优秀的回复点赞了捏
@希希芙 #8 还真是 那我加回来
@痛失姓名的站长 #7 搞一个搞一个🤗🤗🤗
@痛失姓名的站长 #9 这么快OωO
做成一个饼的形象怎么样？
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>打赏按钮效果预览</title>
<style>
/* 页面居中背景背景 */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f7f9fb;
}
/* 打赏按钮核心样式 */
.reward-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
background: linear-gradient(135deg, #ffa801, #ff3f34);
color: #ffffff;
font-size: 22px;
font-weight: 700;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
cursor: pointer;
user-select: none;
box-shadow: 0 4px 15px rgba(255, 63, 52, 0.35),
0 0 0 3px #ffffff,
0 0 0 5px #ffa801;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
animation: rewardPulse 2.5s infinite ease-in-out;
overflow: hidden;
}
/* 划过流光扫影特效 */
.reward-btn::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255, 255, 255, 0.6) 50%,
transparent 70%
);
transform: rotate(30deg) translateY(-120%);
transition: transform 0.6s ease;
}
/* 循环外扩金光气泡 */
.reward-btn::after {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid rgba(255, 168, 1, 0.6);
opacity: 0;
animation: ringRipple 2.5s infinite ease-in-out;
pointer-events: none;
}
/* Hover 悬停放大与光效触发 */
.reward-btn:hover {
transform: scale(1.12) translateY(-3px);
box-shadow: 0 8px 22px rgba(255, 63, 52, 0.5),
0 0 0 3px #ffffff,
0 0 0 6px #ffa801;
}
.reward-btn:hover::before {
transform: rotate(30deg) translateY(120%);
}
/* Click 点击按下弹簧反馈 */
.reward-btn:active {
transform: scale(0.92) translateY(0);
box-shadow: 0 2px 8px rgba(255, 63, 52, 0.4),
0 0 0 3px #ffffff,
0 0 0 4px #ff3f34;
}
/* 呼吸心跳动效 */
@keyframes rewardPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 15px rgba(255, 63, 52, 0.35),
0 0 0 3px #ffffff,
0 0 0 5px #ffa801;
}
50% {
transform: scale(1.06);
box-shadow: 0 6px 20px rgba(255, 63, 52, 0.5),
0 0 0 3px #ffffff,
0 0 0 7px rgba(255, 168, 1, 0.8);
}
}
/* 金环扩散动画 */
@keyframes ringRipple {
0% {
transform: scale(0.9);
opacity: 0.8;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
</style>
</head>
<body>
<!-- 打赏按钮 -->
<div class="reward-btn" title="打赏支持">赏</div>
</body>
</html>当前版本的赏和我的暗色主题完全冲突，的确需要做个优化，我计划整个svg 不知道可不可行
/* =====「赏」字 UI ===== */
.reward-btn {
--size: 72px;
--main: #e5484d;
--main-dark: #c9363d;
width: var(--size);
height: var(--size);
padding: 0;
border: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle at 35% 28%,
rgba(255, 255, 255, 0.28),
transparent 32%
),
linear-gradient(145deg, #f25a5f, var(--main-dark));
color: #fff;
font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
font-size: 34px;
font-weight: 700;
line-height: 1;
cursor: pointer;
user-select: none;
box-shadow:
0 8px 20px rgba(229, 72, 77, 0.28),
inset 0 1px 1px rgba(255, 255, 255, 0.3);
position: relative;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
filter 0.2s ease;
}
/* 外圈 */
.reward-btn::before {
content: "";
position: absolute;
inset: 5px;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: inherit;
pointer-events: none;
}
/* 底部小光晕 */
.reward-btn::after {
content: "";
position: absolute;
left: 18%;
right: 18%;
bottom: -10px;
height: 12px;
border-radius: 50%;
background: rgba(229, 72, 77, 0.22);
filter: blur(8px);
z-index: -1;
transition: 0.2s ease;
}
.reward-btn:hover {
transform: translateY(-3px) scale(1.05);
filter: brightness(1.05);
box-shadow:
0 12px 28px rgba(229, 72, 77, 0.36),
inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.reward-btn:hover::after {
opacity: 0.8;
transform: scaleX(0.9);
}
.reward-btn:active {
transform: translateY(0) scale(0.96);
box-shadow:
0 4px 12px rgba(229, 72, 77, 0.24),
inset 0 2px 4px rgba(120, 20, 24, 0.18);
}
.reward-btn:focus-visible {
outline: 3px solid rgba(229, 72, 77, 0.2);
outline-offset: 4px;
}
/* 深色模式 */
@media (prefers-color-scheme: dark) {
.reward-btn {
box-shadow:
0 10px 28px rgba(229, 72, 77, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
}<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>赏 - 打赏按钮效果预览</title>
<style>
/* ===== 全局样式 & 字体设置 ===== */
:root {
--reward-red: #8B0000;
--reward-gold: #FFD700;
--reward-dark-gold: #D4AF37;
--glow-color: rgba(255, 215, 0, 0.7);
--font-family: 'STKaiti', 'KaiTi', 'Microsoft YaHei', serif;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 60px;
background: linear-gradient(135deg, #1a0a0a 0%, #2d1010 40%, #1a1020 100%);
font-family: var(--font-family);
color: #f0e6d2;
}
h1 {
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 0.15em;
opacity: 0.7;
}
.section {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.section-title {
font-size: 0.95rem;
letter-spacing: 0.1em;
opacity: 0.55;
margin-bottom: 8px;
}
/* ===== 核心按钮：正常状态 ===== */
.reward-btn {
width: 100px;
height: 100px;
border-radius: 50%;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
background: radial-gradient(
circle at center,
var(--reward-red) 0%,
var(--reward-dark-gold) 50%,
var(--reward-gold) 100%
);
color: var(--reward-gold);
font-size: 2.5rem;
font-family: var(--font-family);
text-align: center;
line-height: 100px;
letter-spacing: 2px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
/* 光环伪元素 */
.reward-btn::after {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255, 215, 0, 0.3) 0%,
transparent 70%
);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
/* 悬停状态 */
.reward-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 25px 15px var(--glow-color);
}
.reward-btn:hover::after {
opacity: 1;
}
/* 点击状态 */
.reward-btn:active {
transform: scale(0.95);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
background: radial-gradient(
circle at center,
#6B0000 0%,
var(--reward-dark-gold) 100%
);
animation: press 0.2s ease;
}
@keyframes press {
0% { transform: scale(1); }
50% { transform: scale(0.9); }
100% { transform: scale(0.95); }
}
/* ===== 奖励触发按钮（Tip 1000） ===== */
.reward-trigger {
width: 80px;
height: 80px;
border-radius: 50%;
border: none;
background: radial-gradient(
circle at center,
var(--reward-red) 0%,
var(--reward-gold) 100%
);
color: var(--reward-gold);
font-size: 1.2rem;
font-family: var(--font-family);
text-align: center;
line-height: 1.3;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding-top: 14px;
}
.reward-trigger:hover {
box-shadow: 0 0 20px 10px var(--glow-color);
transform: scale(1.05);
}
.reward-trigger:active {
transform: scale(0.95);
}
/* ===== 奖励庆祝动画 ===== */
.celebration {
position: relative;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.celebration-btn {
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(
circle at center,
var(--reward-gold) 0%,
var(--reward-red) 100%
);
display: flex;
align-items: center;
justify-content: center;
color: var(--reward-gold);
font-size: 3rem;
font-family: var(--font-family);
position: relative;
z-index: 1;
animation: pulse 2s infinite alternate;
cursor: pointer;
border: none;
}
@keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
100% { transform: scale(1.05); box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); }
}
/* 飞舞金币效果 */
.coin {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: radial-gradient(
circle at 30% 30%,
var(--reward-gold) 0%,
var(--reward-dark-gold) 100%
);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
animation: float 3s infinite ease-in-out;
z-index: 2;
}
.coin:nth-child(2) { top: 20%; left: 20%; animation-delay: 0s; }
.coin:nth-child(3) { top: 10%; left: 70%; animation-delay: 0.5s; }
.coin:nth-child(4) { top: 70%; left: 10%; animation-delay: 1s; }
.coin:nth-child(5) { top: 60%; left: 80%; animation-delay: 1.5s; }
.coin:nth-child(6) { top: 30%; left: 60%; animation-delay: 0.8s; }
.coin:nth-child(7) { top: 80%; left: 50%; animation-delay: 1.2s; }
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
50% {
transform: translateY(-60px) rotate(360deg);
opacity: 0.7;
}
}
/* 金币上的 ¥ 符号 */
.coin::after {
content: '¥';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #8B6914;
font-weight: bold;
}
/* 文字描述 */
.celebration-text {
text-align: center;
margin-top: 20px;
color: var(--reward-gold);
font-family: var(--font-family);
font-size: 1.1rem;
letter-spacing: 0.05em;
opacity: 0.85;
}
/* ===== 响应式 ===== */
@media (max-width: 768px) {
body {
padding: 40px 16px;
gap: 40px;
}
.reward-btn {
width: 80px;
height: 80px;
font-size: 2rem;
line-height: 80px;
}
.celebration {
width: 160px;
height: 160px;
}
.celebration-btn {
width: 120px;
height: 120px;
font-size: 2.5rem;
}
}
/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
.reward-btn,
.reward-trigger,
.celebration-btn,
.coin {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<h1>打赏按钮效果预览</h1>
<!-- 核心按钮 -->
<div class="section">
<span class="section-title">悬停发光 · 点击按压</span>
<button class="reward-btn">赏</button>
</div>
<!-- 奖励触发按钮 -->
<div class="section">
<span class="section-title">打赏触发按钮</span>
<button class="reward-trigger">赏<br>1000</button>
</div>
<!-- 奖励庆祝动画 -->
<div class="section">
<span class="section-title">打赏庆祝 · 金币飞舞</span>
<div class="celebration">
<button class="celebration-btn">赏</button>
<div class="coin"></div>
<div class="coin"></div>
<div class="coin"></div>
<div class="coin"></div>
<div class="coin"></div>
<div class="coin"></div>
</div>
<p class="celebration-text">Rewarding: +1000 Points! 🎉</p>
</div>
</body>
</html><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>赏 (Reward) Button</title>
<style>
/* ===== 基础重置 ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 60px;
padding: 40px;
background: linear-gradient(135deg, #dfe7f0, #cdd8e8);
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* ===== 核心：赏按钮 ===== */
.reward-btn {
--size: 90px;
width: var(--size);
height: var(--size);
border-radius: 50%;
border: none;
cursor: pointer;
position: relative;
/* 文字样式 */
font-size: calc(var(--size) * 0.45);
font-weight: 700;
color: #ffe9b0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
/* 红金渐变主体 */
background:
radial-gradient(circle at 35% 30%, #d94141 0%, #a81b1b 55%, #7a0f0f 100%);
/* 金色描边 (双层边框) */
box-shadow:
inset 0 0 0 4px #f6d78a, /* 内金环 */
inset 0 0 0 6px #b8860b, /* 内暗金 */
0 0 0 3px #e8c268, /* 外金环 */
0 8px 16px rgba(0, 0, 0, 0.35); /* 投影 */
transition: all 0.25s ease;
}
/* 高光反射 */
.reward-btn::before {
content: "";
position: absolute;
top: 12%;
left: 20%;
width: 45%;
height: 30%;
border-radius: 50%;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.55),
transparent 70%
);
pointer-events: none;
}
/* ===== 状态 1: Hover 发光光晕 ===== */
.reward-btn:hover {
transform: scale(1.05);
box-shadow:
inset 0 0 0 4px #f6d78a,
inset 0 0 0 6px #b8860b,
0 0 0 3px #e8c268,
0 0 25px 8px rgba(255, 200, 60, 0.9), /* 金色光晕 */
0 0 45px 15px rgba(255, 180, 40, 0.5),
0 8px 16px rgba(0, 0, 0, 0.35);
animation: glow-pulse 1.5s ease-in-out infinite;
}
@keyframes glow-pulse {
0%, 100% {
filter: brightness(1);
}
50% {
filter: brightness(1.15);
}
}
/* ===== 状态 2: Active 按压动画 ===== */
.reward-btn:active {
transform: scale(0.92);
box-shadow:
inset 0 0 0 4px #f6d78a,
inset 0 0 0 6px #b8860b,
0 0 0 3px #e8c268,
inset 0 4px 12px rgba(0, 0, 0, 0.5), /* 内凹阴影 */
0 2px 6px rgba(0, 0, 0, 0.3);
}
/* ===== 大号按钮 (庆祝区域) ===== */
.reward-btn.big {
--size: 160px;
}
/* ===== 庆祝动画区域 ===== */
.celebration {
position: relative;
width: 340px;
height: 340px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
background: radial-gradient(
circle at center,
rgba(255, 240, 200, 0.6),
rgba(240, 230, 220, 0.2)
);
border-radius: 24px;
}
/* ===== 3D 浮动金币 ===== */
.coin {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #a05a00;
font-size: 20px;
background: radial-gradient(circle at 35% 30%, #ffe9a0, #e0a020 70%, #b87800);
box-shadow:
inset 0 0 0 2px #fff3c4,
0 4px 8px rgba(0, 0, 0, 0.3);
}
.coin-1 {
top: 20px;
left: 40px;
animation: float 2.5s ease-in-out infinite;
}
.coin-2 {
top: 60px;
right: 30px;
animation: float 3s ease-in-out infinite 0.5s;
}
.coin-3 {
bottom: 90px;
left: 20px;
animation: float 2.8s ease-in-out infinite 0.3s;
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(-10deg);
}
50% {
transform: translateY(-20px) rotate(10deg);
}
}
/* ===== 奖励文字 ===== */
.reward-text {
position: absolute;
bottom: 30px;
font-size: 18px;
font-weight: 600;
color: #333;
}
</style>
</head>
<body>
<!-- 核心按钮 -->
<button class="reward-btn">赏</button>
<!-- 奖励庆祝动画区域 -->
<div class="celebration">
<button class="reward-btn big">赏</button>
<span class="coin coin-1">¥</span>
<span class="coin coin-2">¥</span>
<span class="coin coin-3">¥</span>
<p class="reward-text">Rewarding: +1000 Points! 🎉</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Liquid Gradient Tip Button</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: #0a0e14;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
overflow-x: hidden;
}
.container {
width: 100%;
max-width: 1024px;
background: linear-gradient(145deg, #12161f 0%, #0d1017 100%);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.06);
padding: 30px 40px;
position: relative;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}
/* Header */
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
margin-bottom: 30px;
}
.header-left {
display: flex;
align-items: center;
gap: 15px;
}
.menu-icon {
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
}
.menu-icon span {
width: 22px;
height: 2px;
background: #8a93a5;
border-radius: 2px;
}
.header-left .subtitle {
color: #6b7280;
font-size: 12px;
letter-spacing: 1px;
font-weight: 500;
}
.header-title {
color: #ffffff;
font-size: 24px;
font-weight: 700;
letter-spacing: 2px;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.header-right {
color: #6b7280;
font-size: 12px;
letter-spacing: 1px;
}
/* Cards */
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-bottom: 30px;
}
.card {
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 40px 20px 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
min-height: 400px;
position: relative;
overflow: hidden;
}
.btn-stage {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
}
/* The 3D Button */
.tip-btn {
position: relative;
width: 130px;
height: 130px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
transition: transform 0.2s ease;
}
/* Gold ring */
.tip-btn .ring {
position: absolute;
inset: 0;
border-radius: 50%;
background: linear-gradient(145deg, #f5d77a 0%, #c99a3f 25%, #8a6420 50%, #e8c368 75%, #fff3c4 100%);
padding: 8px;
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.5),
inset 0 2px 4px rgba(255, 255, 255, 0.6);
}
/* Inner liquid gradient */
.tip-btn .liquid {
position: absolute;
inset: 8px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 25%, #7b4bd8 0%, #4a2b9e 35%, #3d1a8a 60%, #6b2d94 100%);
overflow: hidden;
box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.5);
}
.tip-btn .liquid::before {
content: '';
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
background:
radial-gradient(circle at 30% 20%, rgba(120, 90, 220, 0.9) 0%, transparent 40%),
radial-gradient(circle at 70% 70%, rgba(200, 60, 140, 0.6) 0%, transparent 45%),
radial-gradient(circle at 60% 40%, rgba(60, 120, 220, 0.5) 0%, transparent 50%);
animation: liquidMove 6s ease-in-out infinite;
}
@keyframes liquidMove {
0%, 100% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.15); }
}
/* Highlight glare */
.tip-btn .glare {
position: absolute;
top: 15px;
left: 25px;
width: 45px;
height: 30px;
background: radial-gradient(ellipse, rgba(255, 255, 255, 0.7) 0%, transparent 70%);
border-radius: 50%;
z-index: 3;
filter: blur(2px);
}
/* Chinese character */
.tip-btn .char {
position: relative;
z-index: 4;
font-size: 56px;
font-weight: 700;
color: transparent;
background: linear-gradient(180deg, #fff3c4 0%, #f5d77a 40%, #d4a445 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
filter: drop-shadow(0 2px 3px rgba(120, 80, 20, 0.6));
font-family: 'KaiTi', 'STKaiti', serif;
}
/* Outer glow rings */
.glow-ring {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
/* State 1: Normal - soft glow */
.card-normal .glow-ring {
width: 200px;
height: 200px;
border: 2px solid rgba(245, 215, 122, 0.15);
box-shadow: 0 0 40px rgba(245, 215, 122, 0.2);
}
/* State 2: Hover - intense glow */
.card-hover .glow-burst {
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 220, 120, 0.5) 0%, rgba(255, 200, 80, 0.2) 40%, transparent 70%);
animation: pulse 2s ease-in-out infinite;
}
.card-hover .ray {
position: absolute;
width: 280px;
height: 280px;
background:
conic-gradient(from 0deg,
transparent 0deg, rgba(255, 230, 150, 0.4) 10deg, transparent 20deg,
transparent 90deg, rgba(255, 230, 150, 0.4) 100deg, transparent 110deg,
transparent 180deg, rgba(255, 230, 150, 0.4) 190deg, transparent 200deg,
transparent 270deg, rgba(255, 230, 150, 0.4) 280deg, transparent 290deg);
border-radius: 50%;
animation: rotate 8s linear infinite;
filter: blur(3px);
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.1); opacity: 1; }
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* State 3: Click - coin celebration */
.card-click .coin-burst {
position: absolute;
width: 320px;
height: 320px;
pointer-events: none;
}
.card-click .glow-burst {
position: absolute;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 210, 100, 0.4) 0%, transparent 65%);
}
/* Coins */
.coin {
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(145deg, #ffe98a 0%, #f5c542 50%, #c99a2f 100%);
border: 2px solid #d4a840;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
color: #a67c1f;
}
.coin::after {
content: '$';
}
/* Floating decorative coins in cards */
.deco-coin {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(145deg, #ffe98a 0%, #f5c542 50%, #c99a2f 100%);
border: 2px solid #d4a840;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
color: #a67c1f;
animation: float 3s ease-in-out infinite;
}
.deco-coin::after {
content: '$';
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Card labels */
.card-label {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 30px;
padding: 12px 24px;
color: #c5cad3;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
text-align: center;
margin-top: 10px;
z-index: 10;
}
/* Footer */
.footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-stats {
display: flex;
gap: 30px;
}
.stat {
display: flex;
align-items: center;
gap: 8px;
color: #6b7280;
font-size: 13px;
}
.stat svg {
width: 16px;
height: 16px;
fill: #6b7280;
}
.designer {
display: flex;
align-items: center;
gap: 10px;
color: #c5cad3;
font-size: 13px;
}
.designer .avatar {
width: 28px;
height: 28px;<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>赏按钮 - React风格实现</title>
<style>
/* ===== 基础重置 ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #f8fafc;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* ===== 按钮容器 ===== */
.reward-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px;
}
.reward-wrapper {
position: relative;
cursor: pointer;
}
/* ===== 主按钮 ===== */
.reward-btn {
position: relative;
z-index: 10;
width: 96px;
height: 96px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
background: linear-gradient(135deg, #f9a8d4, #ec4899, #fbbf24);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
font-size: 40px;
font-weight: bold;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.reward-btn:hover {
transform: scale(1.1);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}
.reward-btn.success {
box-shadow: 0 0 0 4px rgba(253, 224, 71, 0.5);
}
.reward-btn.active {
transform: scale(0.95);
}
/* ===== 粒子效果 ===== */
.particle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 1;
pointer-events: none;
font-size: 24px;
}
.particle.exploding {
animation: explode 0.8s ease-out forwards;
}
/* 定义每个粒子的飞行轨迹 */
.particle:nth-child(1) { --x: -50px; --y: -50px; }
.particle:nth-child(2) { --x: 50px; --y: -50px; }
.particle:nth-child(3) { --x: 80px; --y: 0px; }
.particle:nth-child(4) { --x: -80px; --y: 0px; }
.particle:nth-child(5) { --x: 30px; --y: 60px; }
.particle:nth-child(6) { --x: -30px; --y: 60px; }
@keyframes explode {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
100% {
transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.5);
opacity: 0;
}
}
/* ===== 底部文案 ===== */
.reward-text {
margin-top: 16px;
text-align: center;
font-size: 18px;
font-weight: 600;
color: #374151;
min-height: 28px;
}
</style>
</head>
<body>
<div class="reward-container">
<!-- 按钮容器 -->
<div class="reward-wrapper" id="rewardWrapper">
<!-- 粒子效果（点击触发） -->
<div id="particleContainer" class="hidden">
<div class="particle">❤️</div>
<div class="particle">💰</div>
<div class="particle">❤️</div>
<div class="particle">💰</div>
<div class="particle">❤️</div>
<div class="particle">💰</div>
</div>
<!-- 主按钮 -->
<button class="reward-btn" id="rewardBtn">赏</button>
</div>
<!-- 底部文案 -->
<div class="reward-text" id="rewardText">打赏博主</div>
</div>
<script>
const rewardWrapper = document.getElementById('rewardWrapper');
const rewardBtn = document.getElementById('rewardBtn');
const rewardText = document.getElementById('rewardText');
const particleContainer = document.getElementById('particleContainer');
const particles = particleContainer.querySelectorAll('.particle');
let currentState = 'normal'; // 'normal', 'hover', 'success'
let timeoutId = null;
// 鼠标悬停
rewardWrapper.addEventListener('mouseenter', () => {
if (currentState === 'success') return;
currentState = 'hover';
updateUI();
});
// 鼠标离开
rewardWrapper.addEventListener('mouseleave', () => {
if (currentState === 'success') return;
currentState = 'normal';
updateUI();
});
// 点击
rewardBtn.addEventListener('click', () => {
if (currentState === 'success') return;
currentState = 'success';
updateUI();
// 显示粒子并触发动画
showParticles();
// 3秒后自动重置
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
currentState = 'normal';
updateUI();
hideParticles();
}, 3000);
});
function updateUI() {
// 更新按钮样式
rewardBtn.classList.remove('success', 'active');
if (currentState === 'hover') {
// hover 样式已通过 CSS 处理
} else if (currentState === 'success') {
rewardBtn.classList.add('success');
}
// 更新文案
switch (currentState) {
case 'normal':
rewardText.textContent = '打赏博主';
break;
case 'hover':
rewardText.textContent = '打赏 1 积分';
break;
case 'success':
rewardText.textContent = '打赏成功! +1000积分';
break;
}
}
function showParticles() {
particleContainer.classList.remove('hidden');
particles.forEach(p => {
p.classList.remove('exploding');
// 强制重排以重新触发动画
void p.offsetWidth;
p.classList.add('exploding');
});
}
function hideParticles() {
particles.forEach(p => {
p.classList.remove('exploding');
});
particleContainer.classList.add('hidden');
}
</script>
</body>
</html>