网站多彩小工具卡片

简介

图示，没啥好简介的，就是一个彩色信息卡片。备份一下代码

<!-- WordPress自定义HTML小工具 炫彩动态欢迎抽奖卡片 -->
<style>
/* 卡片容器全局重置，避免WP主题样式冲突 */
.bb-card-wrap {
  margin: -20px;
  padding: 0;
  box-sizing: border-box;
}
/* 主卡片自适应容器 */
.bb-welcome-card {
  position: relative;
  width: 100%;
  padding: 10px 20px;
  border-radius: 4px;
  overflow: hidden;
  text-align: center;
  /* 彩虹渐变背景动画 */
  background: linear-gradient(-45deg, #ff416c, #ff4b2b, #f7b733, #00f260, #0575e6, #8e2de2);
  background-size: 400% 400%;
  animation: gradientShift 10s ease infinite;
  box-shadow: 0 8px 30px rgba(120,0,255,0.35);
}
/* 浮动光斑装饰 */
.bb-light-spot {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.6;
  z-index: 1;
}
.spot1 {
  width: 120px;
  height: 120px;
  background: #fff870;
  top: -40px;
  left: -30px;
  animation: float1 8s ease-in-out infinite;
}
.spot2 {
  width: 150px;
  height: 150px;
  background: #4cf0ff;
  bottom: -60px;
  right: -40px;
  animation: float2 12s ease-in-out infinite;
}
.spot3 {
  width: 80px;
  height: 80px;
  background: #ff76e8;
  top: 40%;
  right: 10%;
  animation: float3 6s ease-in-out infinite;
}
/* 内容层级高于光斑 */
.bb-card-content {
  position: relative;
  z-index: 2;
}
/* 流光标题文字 */
.bb-title {
  font-size: clamp(22px,5vw,32px);
  font-weight: 800;
  margin: 0 0 16px;
  background: linear-gradient(90deg, #ffffff, #fff9b0, #ffffff, #b0f7ff);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textShine 3s linear infinite;
  text-shadow: 0 0 12px rgba(255,255,255,0.4);
}
/* 描述文字 */
.bb-desc {
  font-size: clamp(15px,3vw,18px);
  color: #fff;
  margin: 0 0 28px;
  opacity: 0.95;
  letter-spacing: 1px;
}
/* 炫彩抽奖按钮 */
.bb-lottery-btn {
  display: inline-block;
  padding: 14px 36px;
  font-size: 17px;
  font-weight: 700;
  color: #111;
  text-decoration: none;
  border-radius: 999px;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(255,255,255,0.6);
  animation: pulseGlow 2.2s ease-in-out infinite;
}
/* 按钮悬浮效果 */
.bb-lottery-btn:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 0 35px rgba(255,255,255,0.9);
}
.bb-lottery-btn:active {
  transform: translateY(0) scale(0.98);
}
/* 按钮内部流光 */
.bb-lottery-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,120,220,0.5), transparent);
  animation: btnSlide 2.5s linear infinite;
}
.bb-lottery-btn span {
  position: relative;
  z-index: 2;
}

/* 关键帧动画合集 */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes textShine {
  0% { background-position: 0% center; }
  100% { background-position: 300% center; }
}
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 15px rgba(255,255,255,0.5); }
  50% { box-shadow: 0 0 30px rgba(255,255,255,0.9); }
}
@keyframes btnSlide {
  0% { left: -100%; }
  100% { left: 100%; }
}
@keyframes float1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(20px,20px) scale(1.15); }
}
@keyframes float2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-25px,-15px) scale(0.85); }
}
@keyframes float3 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(12deg); }
}
</style>

<div class="bb-card-wrap">
  <div class="bb-welcome-card">
    <!-- 浮动光斑装饰元素 -->
    <div class="bb-light-spot spot1"></div>
    <div class="bb-light-spot spot2"></div>
    <div class="bb-light-spot spot3"></div>
    
    <!-- 卡片文字内容 -->
    <div class="bb-card-content">
      <h2 class="bb-title">欢迎来到哔哔一二</h2>
      <p class="bb-desc">抽个奖试试今日运气吧~</p>
      <!-- 抽奖地址已改为 /circle -->
      <a href="/circle" class="bb-lottery-btn">
        <span>立即抽奖</span>
      </a>
    </div>
  </div>
</div>