CSS3箭靶效果代码
分类：实例代码
CSS3箭靶效果代码属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了箭靶效果，也就是我们常见的射击用的目标靶。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body {
margin: 0;
padding: 0;
}
.circle {
width: 600px;
height: 600px;
margin: 20px auto;
border: 1px solid red;
border-radius: 50%;
background-image: radial-gradient(300px at center, #f00 0%,#f00 10%,
#fff 10%,#fff 15%,
#000 15%,#000 20%,
#fff 20%,#fff 25%,
#000 25%,#000 30%,
#fff 30%,#fff 35%,
#000 35%,#000 40%,
#fff 40%,#fff 45%,
#000 45%,#000 50%,
#fff 50%,#fff 55%,
#000 55%,#000 60%,
#fff 60%,#fff 65%,
#000 65%,#000 70%,
#fff 70%,#fff 75%,
#000 75%,#000 80%,
#fff 80%,#fff 85%,
#000 85%,#000 90%,
#fff 90%,#fff 95%,
#000 95%,#000 100% );
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
CSS3箭靶效果代码，这样的场景在实际项目中还是用的比较多的，关于CSS3箭靶效果代码就介绍到这了。