css制作靶子

2026-04-01 02:31:51CSS

使用CSS制作靶子

通过CSS的伪元素、渐变和边框属性可以创建一个简洁的靶子图形。以下是实现方法：

css制作靶子

基础靶子结构

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

同心圆靶心样式

.target {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  background: 
    /* 最外层红色环 */
    radial-gradient(circle, white 0%, white 25%, red 25%, red 35%, white 35%, white 100%),
    /* 中间白色环 */
    radial-gradient(circle, white 0%, white 15%, red 15%, red 25%, white 25%, white 100%),
    /* 中心红点 */
    radial-gradient(circle, red 0%, red 15%, white 15%, white 100%);
}

增加十字准星线

.target::before, .target::after {
  content: '';
  position: absolute;
  background: black;
}

.target::before {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.target::after {
  width: 100%;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}

动画效果（可选）

添加旋转动画使靶子更生动：

css制作靶子

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

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

简化版单色靶子

若需要更简单的版本：

.simple-target {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 10px solid red;
  box-shadow: 
    0 0 0 20px white,
    0 0 0 30px red,
    0 0 0 40px white;
  position: relative;
}

这些方法均使用纯CSS实现，无需图片资源，可通过调整尺寸和颜色值快速定制不同风格的靶子效果。