body {
min-height: 100vh;
background: #0a0a12;
background-image:
radial-gradient(ellipse at 20% 80%, rgba(120, 50, 200, 0.12) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(50, 100, 200, 0.1) 0%, transparent 50%);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
overflow: hidden;
}
.card-container { position: relative; width: 700px; height: 450px; }
.card { position: relative; width: 100%; height: 100%; background: linear-gradient(160deg, #0d0d15 0%, #141420 50%, #0f0f1a 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: visible; /* 细边框线 - 半透明紫蓝色 */ border: 1px solid rgba(120, 90, 200, 0.25); box-shadow: inset 0 0 30px rgba(100, 80, 180, 0.05), 0 0 20px rgba(120, 80, 200, 0.1); }
.card-content { color: #d0d0e8; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; font-size: 1.6rem; font-weight: 300; letter-spacing: 0.12em; text-shadow: 0 0 15px rgba(140, 100, 255, 0.3); z-index: 10; }
/* ========== 边框光效容器 ========== */ .border-glow { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: 12px; pointer-events: none; overflow: visible; }
/* 柔和的边框光晕 */ .border-glow::before { content: ""; position: absolute; inset: -3px; border-radius: 14px; background: conic-gradient( from var(--angle), transparent 0deg, rgba(147, 112, 219, 0.15) 45deg, rgba(100, 149, 237, 0.2) 90deg, transparent 135deg, transparent 180deg, rgba(138, 43, 226, 0.15) 225deg, rgba(65, 105, 225, 0.2) 270deg, transparent 315deg ); filter: blur(8px); animation: rotateBorder 6s linear infinite; }
/* ========== 移动的发光粒子 ========== */ .particle { position: absolute; width: 6px; height: 6px; background: radial-gradient(circle, #a78bfa 0%, #7c3aed 40%, transparent 70%); border-radius: 50%; box-shadow: 0 0 8px 2px rgba(167, 139, 250, 0.8), 0 0 15px 4px rgba(124, 58, 237, 0.5), 0 0 25px 6px rgba(124, 58, 237, 0.3); pointer-events: none; }
/* 粒子1 - 顶边从左到右 */ .particle-1 { top: -3px; animation: moveTop 8s linear infinite; }
/* 粒子2 - 右边从上到下 */ .particle-2 { right: -3px; animation: moveRight 8s linear infinite; animation-delay: -2s; }
/* 粒子3 - 底边从右到左 */ .particle-3 { bottom: -3px; animation: moveBottom 8s linear infinite; animation-delay: -4s; }
/* 粒子4 - 左边从下到上 */ .particle-4 { left: -3px; animation: moveLeft 8s linear infinite; animation-delay: -6s; }
/* 第二组粒子 - 不同颜色和时间偏移 */ .particle-5 { width: 4px; height: 4px; background: radial-gradient(circle, #60a5fa 0%, #3b82f6 40%, transparent 70%); box-shadow: 0 0 6px 2px rgba(96, 165, 250, 0.8), 0 0 12px 3px rgba(59, 130, 246, 0.5); top: -2px; animation: moveTop 8s linear infinite; animation-delay: -4s; }
.particle-6 { width: 4px; height: 4px; background: radial-gradient(circle, #60a5fa 0%, #3b82f6 40%, transparent 70%); box-shadow: 0 0 6px 2px rgba(96, 165, 250, 0.8), 0 0 12px 3px rgba(59, 130, 246, 0.5); right: -2px; animation: moveRight 8s linear infinite; animation-delay: -6s; }
.particle-7 { width: 4px; height: 4px; background: radial-gradient(circle, #c4b5fd 0%, #8b5cf6 40%, transparent 70%); box-shadow: 0 0 6px 2px rgba(196, 181, 253, 0.8), 0 0 12px 3px rgba(139, 92, 246, 0.5); bottom: -2px; animation: moveBottom 8s linear infinite; }
.particle-8 { width: 4px; height: 4px; background: radial-gradient(circle, #c4b5fd 0%, #8b5cf6 40%, transparent 70%); box-shadow: 0 0 6px 2px rgba(196, 181, 253, 0.8), 0 0 12px 3px rgba(139, 92, 246, 0.5); left: -2px; animation: moveLeft 8s linear infinite; animation-delay: -2s; }
/* ========== 动画定义 ========== */ @keyframes rotateBorder { 0% { --angle: 0deg; } 100% { --angle: 360deg; } }
@keyframes moveTop { 0% { left: 0%; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes moveRight { 0% { top: 0%; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes moveBottom { 0% { right: 0%; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { right: 100%; opacity: 0; } }
@keyframes moveLeft { 0% { bottom: 0%; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { bottom: 100%; opacity: 0; } }
/* ========== 角落高亮 ========== */ .corner-glow { position: absolute; width: 60px; height: 60px; pointer-events: none; }
.corner-glow::before { content: ""; position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(124, 58, 237, 0.3) 0%, transparent 70%); filter: blur(10px); animation: cornerPulse 3s ease-in-out infinite; }
.corner-tl { top: -10px; left: -10px; } .corner-tr { top: -10px; right: -10px; } .corner-bl { bottom: -10px; left: -10px; } .corner-br { bottom: -10px; right: -10px; }
.corner-tl::before { animation-delay: 0s; } .corner-tr::before { animation-delay: 0.75s; } .corner-br::before { animation-delay: 1.5s; } .corner-bl::before { animation-delay: 2.25s; }
@keyframes cornerPulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 0.8; transform: scale(1.2); } }
/* ========== 底部反射 ========== */ .shadow-reflection { position: absolute; bottom: -40px; left: 15%; right: 15%; height: 50px; background: linear-gradient(90deg, transparent 0%, rgba(124, 58, 237, 0.15) 20%, rgba(100, 149, 237, 0.2) 50%, rgba(124, 58, 237, 0.15) 80%, transparent 100% ); filter: blur(20px); transform: scaleY(0.4); opacity: 0.5; }
/* ========== 标签 ========== */ .tag { position: absolute; top: 20px; right: 20px; padding: 5px 14px; background: rgba(100, 80, 180, 0.1); border: 1px solid rgba(140, 100, 220, 0.3); border-radius: 16px; color: #a78bfa; font-family: 'Consolas', monospace; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; z-index: 20; }
/* 悬停效果 */ .card-container:hover .particle { box-shadow: 0 0 10px 3px rgba(167, 139, 250, 0.9), 0 0 20px 6px rgba(124, 58, 237, 0.6), 0 0 35px 10px rgba(124, 58, 237, 0.4); }
.card-container:hover .border-glow::before { filter: blur(12px); opacity: 1.2; }
.card-container:hover .card { border-color: rgba(140, 100, 220, 0.4); box-shadow: inset 0 0 40px rgba(100, 80, 180, 0.08), 0 0 30px rgba(120, 80, 200, 0.15); }
<!-- 发光粒子 -->
<div class="particle particle-1"></div>
<div class="particle particle-2"></div>
<div class="particle particle-3"></div>
<div class="particle particle-4"></div>
<div class="particle particle-5"></div>
<div class="particle particle-6"></div>
<div class="particle particle-7"></div>
<div class="particle particle-8"></div>
<!-- 角落光晕 -->
<div class="corner-glow corner-tl"></div>
<div class="corner-glow corner-tr"></div>
<div class="corner-glow corner-bl"></div>
<div class="corner-glow corner-br"></div>
<div class="card">
<span class="tag">LIVE PREVIEW</span>
<div class="card-content">边框流光粒子效果</div>
</div>
<div class="shadow-reflection"></div>
</div>
