css制作靶子

使用CSS制作靶子效果

靶子通常由多个同心圆组成，可以通过CSS的border-radius属性创建圆形，并利用position属性叠加多个圆环。

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="ring ring5"></div>
</div>

CSS样式

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

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

.ring1 {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 2px solid #000;
}

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

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

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

.ring5 {
  width: 20%;
  height: 20%;
  background-color: #f00;
}

使用CSS渐变创建彩色靶子

通过radial-gradient可以更简洁地实现靶子效果，减少HTML元素数量。

HTML结构

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

CSS样式

.color-target {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: 
    radial-gradient(circle, #f00 0%, #f00 10%, transparent 10%),
    radial-gradient(circle, #000 0%, #000 20%, transparent 20%),
    radial-gradient(circle, #fff 0%, #fff 30%, transparent 30%),
    radial-gradient(circle, #000 0%, #000 40%, transparent 40%),
    radial-gradient(circle, #fff 0%, #fff 50%, #000 50%);
  margin: 50px auto;
  border: 2px solid #000;
}

添加3D效果

使用box-shadow和transform可以增加立体感。

CSS补充样式

.target {
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transform: rotateX(10deg);
  transition: transform 0.3s;
}

.target:hover {
  transform: rotateX(10deg) scale(1.05);
}

响应式靶子设计

使用vw单位使靶子大小随视口变化。

CSS修改

.target {
  width: 30vw;
  height: 30vw;
  max-width: 400px;
  max-height: 400px;
}

这些方法提供了从基础到进阶的靶子实现方案，可根据需要选择合适的方式。通过调整颜色、尺寸和层数，可以创建不同风格的靶子效果。