当前位置：首页 > JavaScript

JS实现勋章

2026-02-01 11:41:18JavaScript

实现动态勋章效果

使用CSS和JavaScript创建动态旋转勋章。HTML部分定义勋章容器，CSS设置样式和动画，JavaScript控制交互行为。

JS实现勋章

<div class="badge-container">
  <div class="badge">
    <span class="badge-text">VIP</span>
  </div>
</div>

.badge-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.badge {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff0000, #ff7300);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(255, 115, 0, 0.7);
  animation: rotate 3s linear infinite;
  cursor: pointer;
}

.badge-text {
  color: white;
  font-weight: bold;
  font-size: 24px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

const badge = document.querySelector('.badge');
badge.addEventListener('click', () => {
  badge.style.animationPlayState = badge.style.animationPlayState === 'paused' ? 'running' : 'paused';
});

创建进度勋章系统

实现基于用户进度的动态勋章解锁功能。HTML定义勋章展示区域，CSS设置勋章样式，JavaScript处理进度逻辑。

JS实现勋章

<div class="achievement-system">
  <div class="badge locked" data-target="5">
    <div class="badge-icon">🥇</div>
    <div class="badge-title">初级玩家</div>
  </div>
  <div class="progress-tracker">
    当前进度: <span class="progress-count">0</span>/5
  </div>
  <button class="add-progress">增加进度</button>
</div>

.achievement-system {
  text-align: center;
  font-family: Arial, sans-serif;
}

.badge {
  display: inline-block;
  padding: 15px;
  margin: 10px;
  border-radius: 10px;
  background: #f0f0f0;
  transition: all 0.3s;
}

.badge.unlocked {
  background: linear-gradient(45deg, #ffd700, #ffbf00);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.badge.locked {
  filter: grayscale(80%);
  opacity: 0.7;
}

.badge-icon {
  font-size: 40px;
}

.badge-title {
  margin-top: 5px;
  font-weight: bold;
}

.progress-tracker {
  margin: 20px;
  font-size: 18px;
}

.add-progress {
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

const badge = document.querySelector('.badge');
const progressCount = document.querySelector('.progress-count');
const addProgressBtn = document.querySelector('.add-progress');
const target = parseInt(badge.dataset.target);
let currentProgress = 0;

addProgressBtn.addEventListener('click', () => {
  currentProgress = Math.min(currentProgress + 1, target);
  progressCount.textContent = currentProgress;

  if(currentProgress >= target) {
    badge.classList.remove('locked');
    badge.classList.add('unlocked');
    addProgressBtn.disabled = true;
  }
});

实现3D勋章效果

使用CSS 3D变换创建立体勋章效果，通过JavaScript添加悬停交互。

<div class="scene">
  <div class="badge-3d">
    <div class="badge-face front">🏆</div>
    <div class="badge-face back">冠军</div>
  </div>
</div>

.scene {
  perspective: 1000px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}

.badge-3d {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.badge-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  backface-visibility: hidden;
}

.front {
  background: radial-gradient(circle, #ffd700, #ff9800);
  transform: rotateY(0deg);
}

.back {
  background: radial-gradient(circle, #ff9800, #ffd700);
  transform: rotateY(180deg);
  font-size: 30px;
  color: white;
}

const badge3d = document.querySelector('.badge-3d');

badge3d.addEventListener('mouseenter', () => {
  badge3d.style.transform = 'rotateY(180deg)';
});

badge3d.addEventListener('mouseleave', () => {
  badge3d.style.transform = 'rotateY(0deg)';
});