css制作靶子

CSS 制作靶子

使用 CSS 可以轻松创建一个靶子效果，主要通过嵌套的圆形元素和背景色实现。以下是实现方法：

HTML 结构

<div class="target">
  <div class="ring ring1"></div>
  <div class="ring ring2"></div>
  <div class="ring ring3"></div>
  <div class="ring ring4"></div>
  <div class="bullseye"></div>
</div>

CSS 样式

.target {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 20px auto;
}

.ring {
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.ring1 {
  width: 100%;
  height: 100%;
  background-color: #ff0000;
}

.ring2 {
  width: 80%;
  height: 80%;
  background-color: #fff;
}

.ring3 {
  width: 60%;
  height: 60%;
  background-color: #ff0000;
}

.ring4 {
  width: 40%;
  height: 40%;
  background-color: #fff;
}

.bullseye {
  position: absolute;
  width: 20%;
  height: 20%;
  background-color: #ff0000;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

关键点说明

• 使用 position: absolute 让所有圆环重叠居中
• 通过 border-radius: 50% 创建圆形
• 逐渐减小的宽度/高度百分比形成同心圆效果
• 红白交替的背景色实现经典靶子外观

进阶优化

添加阴影增强立体感：

.target {
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

添加旋转动画：

.target:hover {
  animation: spin 2s linear infinite;
}

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