css 制作比分

CSS 制作比分效果

制作比分效果可以通过CSS的伪元素、动画和布局属性实现。以下是几种常见的方法：

使用Flex布局和动画

通过Flex布局可以轻松对齐比分数字，结合动画实现动态变化效果。

.score-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 2rem;
  font-weight: bold;
}

.score {
  transition: transform 0.3s ease;
}

.score:hover {
  transform: scale(1.2);
}

<div class="score-container">
  <span class="score">3</span>
  <span>:</span>
  <span class="score">2</span>
</div>

使用伪元素添加装饰

通过伪元素可以在比分两侧添加装饰性元素，增强视觉效果。

.score-separator {
  position: relative;
  padding: 0 20px;
}

.score-separator::before,
.score-separator::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 2px;
  background: #000;
}

.score-separator::before {
  left: 0;
}

.score-separator::after {
  right: 0;
}

动态更新比分

结合JavaScript可以实现比分的动态更新，通过CSS过渡动画让变化更平滑。

.score-change {
  animation: pulse 0.5s;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

document.querySelector('.score').classList.add('score-change');
setTimeout(() => {
  document.querySelector('.score').classList.remove('score-change');
}, 500);

使用CSS变量

通过CSS变量可以方便地动态调整比分样式。

:root {
  --score-color: #ff0000;
  --score-size: 24px;
}

.score {
  color: var(--score-color);
  font-size: var(--score-size);
}

响应式比分设计

使用媒体查询确保比分在不同设备上显示良好。

.score-container {
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .score-container {
    font-size: 2rem;
  }
}

这些方法可以根据实际需求组合使用，实现各种风格的比分效果。