抽奖测试开始
快速
用户 ID 5770 · 当前名首次快照 2026-08-12 10:14:19 · 当前名始于 2026-08-12 10:14:19 · 原站主页: https://linux.sb/user/5770
发言
共 647 楼 · 第 1 / 13 页
@StellaFortuna林可欣 #21 我意思是发给谁了？
我问题没解决，你们竟然聊嗨了😒
@之类的 #1 并没有写✈️呀
但是不提示违禁词是哪些，请问如何破解？
你要什么api
迪迦变成光飞走了
@INS美图 #5 进不去的也一大堆
@defer #3 可以开一家线上实体大郎烧饼店，B友用积分买烧饼吃也不错
@sablew #1 等我再发现了华点，再告诉大家
php算后端吗
这里成了隔壁八卦交流会所。暂时需要所长一名
一步一步中
可以打赏你喜欢的帖子
@yhy__bond #1 恭喜B友全款拿下VPS
回复满 5 字即参与
抽奖中
@zihanla #2 这样呀知道了
我怎么没有？
签到睡觉
回复满 7 字即参与，需完成人机验证
让不睡觉的蹬
@Wcowin #5 同样优秀
已成功兑换虚拟卡「四级盲盒」。官网：https://byeapi.top
@lukias #2 blog没咋用了最近，音乐本身就是几秒
回复满 5 字即参与，需完成人机验证
回复满 5 字即参与，需完成人机验证
@Sam.Altman #8 还有爱了爱了爱慕(llm)
已成功兑换虚拟卡「5 Credits」。
回复满 8 字即参与，需完成人机验证
可以去我那里看看
你竟然还是个小孩
可以去github上找个开源的自己部署
已成功兑换虚拟卡「ShareLLM 全站免费模型体验日卡」。
<!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>
<!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">
<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>赏 - 打赏按钮效果预览</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-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>https://go.yohok.cc.cd/
需要的自己手动领取
@痛失姓名的站长 #7 麻烦把我的刚才那个帖子移到我要推广
@痛失姓名的站长 #7 666，还有弹幕
@Adai #1 收到您的反馈，我会安排售后为您及时处理