Html
    Css
    Js

    
                        
#tar {
	width:200px;
	height:200px;
	background:#999;
	font-size:40px;
	color:#fff;
	margin-left:43%;
	margin-top:10%;
	border-radius:100px;
	position:relative;
}
.init-arrow1 {
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}
.init-arrow2 {
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}
.init-arrow3 {
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
}
.init-arrow4 {
	-webkit-transform:rotate(270deg);
	transform:rotate(270deg);
}
.arrow {
	position:absolute;
	top:50%;
	left:50%;
	width:200px;
	height:1px;
	border-bottom:1px solid red;
	-webkit-transform-origin:0% 50%;
	transform-origin:0% 50%;
	text-align:right;
}
.arrow:after {
	content:"";
	width:40px;
	height:40px;
	background:red;
	position:absolute;
	top:-20px;
	right:0;
	border-radius:40px;
}
.btn-box {
	text-align:center;
}
#score {
	text-align:center;
	font-size:28px;
	color:red;
	margin-top:140px;
}
#btn {
	width:120px;
	height:60px;
	font-size:20px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

见缝插针jQuery版

简单易懂

0