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); }
}
