css制作靶子

2026-01-28 00:01:54CSS

使用CSS制作靶子

通过CSS的伪元素、边框和渐变可以轻松创建一个靶子效果。以下是一个简单的实现方法：

<div class="target"></div>

.target {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: 
    radial-gradient(circle, red 0%, red 20%, 
    white 20%, white 40%, 
    red 40%, red 60%, 
    white 60%, white 80%, 
    red 80%, red 100%);
  position: relative;
}

.target::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: black;
}

靶子动画效果

为靶子添加旋转动画效果：

.target {
  animation: spin 5s linear infinite;
}

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

响应式靶子设计

使用CSS变量使靶子大小可调整：

:root {
  --target-size: 200px;
  --ring-count: 5;
}

.target {
  width: var(--target-size);
  height: var(--target-size);
  /* 其余样式同上 */
}

纯CSS箭矢效果

添加箭矢射中靶子的效果：

.target::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  font-size: 40px;
  color: #333;
  animation: hit 2s ease-out;
}

@keyframes hit {
  0% {
    transform: translateX(-100px) translateY(-50%);
  }
  100% {
    transform: translateX(0) translateY(-50%);
  }
}

这些CSS技巧可以组合使用，创建出各种风格的靶子效果，通过调整颜色、大小和动画参数可获得不同的视觉效果。

css制作靶子