CSS3 飞镖盘，超酷效果，另人震惊

2020-01-27 14:16:50

字体：大中小

来源：转载

供稿：网友

Css3技术制作的飞镖盘，效果确实另人震惊，其实对于这个效果最难的就是角度旋转和变形，用CSS3实现起来也不是那么简洁，但最终实现了效果，而且效果还不错。在时下CSS3技术突飞猛进的今天，也该学习一下CSS3了。

<!DOCTYPE HTML><html lang=zh-cn><head><title>css3制作震惊的飞镖盘</title><style>*{margin:0px;padding:0px;}body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}.bredcolor{color:#fff;}.boomerang {width:600px; height:600px;  background:#333; border-radius:600px; position:relative; margin:50px auto; 	box-shadow:0 0 10px rgba(0,0,0,0.8);}.boomerang .outerRing {width:578px; height:578px; border:2px solid #ddd; border-radius:580px; position:absolute; left:10px; top:10px;}.boomerang .numbersTop {width: 60px; height:50px; font:normal 50px/50px arial, sans-serif; color:#ddd; position:absolute; left:270px; top:3px; text-align:center;	text-shadow:-1px 0 1px #eee,1px 0 1px #000;	-webkit-transform-origin:30px 297px;	-moz-transform-origin:30px 297px;	-ms-transform-origin:30px 297px;	-o-transform-origin:30px 297px;	transform-origin:30px 297px;}.boomerang .p11 {	-webkit-transform:rotate(-90deg);	-moz-transform:rotate(-90deg);	-ms-transform:rotate(-90deg);	-o-transform:rotate(-90deg);	transform:rotate(-90deg);}.boomerang .p14 {	-webkit-transform:rotate(-72deg);	-moz-transform:rotate(-72deg);	-ms-transform:rotate(-72deg);	-o-transform:rotate(-72deg);	transform:rotate(-72deg);}.boomerang .p9 {	-webkit-transform:rotate(-54deg);	-moz-transform:rotate(-54deg);	-ms-transform:rotate(-54deg);	-o-transform:rotate(-54deg);	transform:rotate(-54deg);}.boomerang .p12 {	-webkit-transform:rotate(-36deg);	-moz-transform:rotate(-36deg);	-ms-transform:rotate(-36deg);	-o-transform:rotate(-36deg);	transform:rotate(-36deg);}.boomerang .p5 {	-webkit-transform:rotate(-18deg);	-moz-transform:rotate(-18deg);	-ms-transform:rotate(-18deg);	-o-transform:rotate(-18deg);	transform:rotate(-18deg);}.boomerang .p20 {	-webkit-transform:rotate(0);	-moz-transform:rotate(0);	-ms-transform:rotate(0);	-o-transform:rotate(0);	transform:rotate(0);}.boomerang .p1 {	-webkit-transform:rotate(18deg);	-moz-transform:rotate(18deg);	-ms-transform:rotate(18deg);	-o-transform:rotate(18deg);	transform:rotate(18deg);}.boomerang .p18 {	-webkit-transform:rotate(36deg);	-moz-transform:rotate(36deg);	-ms-transform:rotate(36deg);	-o-transform:rotate(36deg);	transform:rotate(36deg);}.boomerang .p4 {	-webkit-transform:rotate(54deg);	-moz-transform:rotate(54deg);	-ms-transform:rotate(54deg);	-o-transform:rotate(54deg);	transform:rotate(54deg);}.boomerang .p13 {	-webkit-transform:rotate(72deg);	-moz-transform:rotate(72deg);	-ms-transform:rotate(72deg);	-o-transform:rotate(72deg);	transform:rotate(72deg);}.boomerang .p6 {	-webkit-transform:rotate(90deg);	-moz-transform:rotate(90deg);	-ms-transform:rotate(90deg);	-o-transform:rotate(90deg);	transform:rotate(90deg);}.boomerang .numbersBottom {width: 60px; height:50px; font:normal 50px/50px arial, sans-serif; color:#ddd; position:absolute; left:270px; bottom:1px; text-align:center;	text-shadow:-1px 0 1px #eee,1px 0 1px #000;	-webkit-transform-origin:30px -246px;	-moz-transform-origin:30px -246px;	-ms-transform-origin:30px -246px;	-o-transform-origin:30px -246px;	transform-origin:30px -246px;}.boomerang .p8 {	-webkit-transform:rotate(72deg);	-moz-transform:rotate(72deg);	-ms-transform:rotate(72deg);	-o-transform:rotate(72deg);	transform:rotate(72deg);}.boomerang .p16 {	-webkit-transform:rotate(54deg);	-moz-transform:rotate(54deg);	-ms-transform:rotate(54deg);	-o-transform:rotate(54deg);	transform:rotate(54deg);}.boomerang .p7 {	-webkit-transform:rotate(36deg);	-moz-transform:rotate(36deg);	-ms-transform:rotate(36deg);	-o-transform:rotate(36deg);	transform:rotate(36deg);}.boomerang .p19 {	-webkit-transform:rotate(18deg);	-moz-transform:rotate(18deg);	-ms-transform:rotate(18deg);	-o-transform:rotate(18deg);	transform:rotate(18deg);}.boomerang .p3 {	-webkit-transform:rotate(0deg);	-moz-transform:rotate(0deg);	-ms-transform:rotate(0deg);	-o-transform:rotate(0deg);	transform:rotate(0deg);}.boomerang .p17 {	-webkit-transform:rotate(-18deg);	-moz-transform:rotate(-18deg);	-ms-transform:rotate(-18deg);	-o-transform:rotate(-18deg);	transform:rotate(-18deg);}.boomerang .p2 {	-webkit-transform:rotate(-36deg);	-moz-transform:rotate(-36deg);	-ms-transform:rotate(-36deg);	-o-transform:rotate(-36deg);	transform:rotate(-36deg);}.boomerang .p15 {	-webkit-transform:rotate(-54deg);	-moz-transform:rotate(-54deg);	-ms-transform:rotate(-54deg);	-o-transform:rotate(-54deg);	transform:rotate(-54deg);}.boomerang .p10 {	-webkit-transform:rotate(-72deg);	-moz-transform:rotate(-72deg);	-ms-transform:rotate(-72deg);	-o-transform:rotate(-72deg);	transform:rotate(-72deg);}.ringOne {width:446px; height:446px; border:2px solid #ddd; border-radius:450px; position:absolute; left:75px; top:75px; 	background:#363; 	box-shadow: inset 0 0 5px rgba(0,0,0,0.8);}.ringOne b {width:223px; height:223px; position:absolute; left:223px; top:0; overflow:hidden;	-webkit-transform-origin: 0 223px;	-moz-transform-origin: 0 223px;	-ms-transform-origin: 0 223px;	-o-transform-origin: 0 223px;	transform-origin: 0 223px;}.ringOne b span {display:block;width:223px; height:223px; position:absolute; left:0; top:0; background:#a33; 	border-radius:0 223px 0 0; 	box-shadow:inset 0 0 5px rgba(0,0,0,0.8);	-webkit-transform-origin: 0 223px;	-moz-transform-origin: 0 223px;	-ms-transform-origin: 0 223px;	-o-transform-origin: 0 223px;	transform-origin: 0 223px;	-webkit-transform:skew(72deg);	-moz-transform:skew(72deg);	-ms-transform:skew(72deg);	-o-transform:skew(72deg);	transform:skew(72deg);}.boomerang b.b1 {	-webkit-transform:rotate(-81deg) skew(-72deg);	-moz-transform:rotate(-81deg) skew(-72deg);	-ms-transform:rotate(-81deg) skew(-72deg);	-o-transform:rotate(-81deg) skew(-72deg);	transform:rotate(-81deg) skew(-72deg);}.boomerang b.b2 {	-webkit-transform:rotate(-45deg) skew(-72deg);	-moz-transform:rotate(-45deg) skew(-72deg);	-ms-transform:rotate(-45deg) skew(-72deg);	-o-transform:rotate(-45deg) skew(-72deg);	transform:rotate(-45deg) skew(-72deg);}.boomerang b.b3 {	-webkit-transform:rotate(-9deg) skew(-72deg);	-moz-transform:rotate(-9deg) skew(-72deg);	-ms-transform:rotate(-9deg) skew(-72deg);	-o-transform:rotate(-9deg) skew(-72deg);	transform:rotate(-9deg) skew(-72deg);}.boomerang b.b4 {	-webkit-transform:rotate(27deg) skew(-72deg);	-moz-transform:rotate(27deg) skew(-72deg);	-ms-transform:rotate(27deg) skew(-72deg);	-o-transform:rotate(27deg) skew(-72deg);	transform:rotate(27deg) skew(-72deg);}.boomerang b.b5 {	-webkit-transform:rotate(63deg) skew(-72deg);	-moz-transform:rotate(63deg) skew(-72deg);	-ms-transform:rotate(63deg) skew(-72deg);	-o-transform:rotate(63deg) skew(-72deg);	transform:rotate(63deg) skew(-72deg);}.boomerang b.b6 {	-webkit-transform:rotate(99deg) skew(-72deg);	-moz-transform:rotate(99deg) skew(-72deg);	-ms-transform:rotate(99deg) skew(-72deg);	-o-transform:rotate(99deg) skew(-72deg);	transform:rotate(99deg) skew(-72deg);}.boomerang b.b7 {	-webkit-transform:rotate(135deg) skew(-72deg);	-moz-transform:rotate(135deg) skew(-72deg);	-ms-transform:rotate(135deg) skew(-72deg);	-o-transform:rotate(135deg) skew(-72deg);	transform:rotate(135deg) skew(-72deg);}.boomerang b.b8 {	-webkit-transform:rotate(171deg) skew(-72deg);	-moz-transform:rotate(171deg) skew(-72deg);	-ms-transform:rotate(171deg) skew(-72deg);	-o-transform:rotate(171deg) skew(-72deg);	transform:rotate(171deg) skew(-72deg);}.boomerang b.b9 {	-webkit-transform:rotate(207deg) skew(-72deg);	-moz-transform:rotate(207deg) skew(-72deg);	-ms-transform:rotate(207deg) skew(-72deg);	-o-transform:rotate(207deg) skew(-72deg);	transform:rotate(207deg) skew(-72deg);}.boomerang b.b10 {	-webkit-transform:rotate(243deg) skew(-72deg);	-moz-transform:rotate(243deg) skew(-72deg);	-ms-transform:rotate(243deg) skew(-72deg);	-o-transform:rotate(243deg) skew(-72deg);	transform:rotate(243deg) skew(-72deg);}.ringTwo {width:416px; height:416px; border:2px solid #ddd; border-radius:420px; position:absolute; left:90px; top:90px; background:#eec; 	box-shadow: inset 0 0 5px rgba(0,0,0,0.8);}.ringTwo b {width:208px; height:208px; position:absolute; left:208px; top:0; overflow:hidden;	-webkit-transform-origin: 0 208px;	-moz-transform-origin: 0 208px;	-ms-transform-origin: 0 208px;	-o-transform-origin: 0 208px;	transform-origin: 0 208px;}.ringTwo b span {display:block;width:208px; height:208px; position:absolute; left:0; top:0; background:#333; 	border-radius:0 208px 0 0; 	box-shadow:inset 0 0 5px rgba(0,0,0,0.8);	-webkit-transform-origin: 0 208px;	-moz-transform-origin: 0 208px;	-ms-transform-origin: 0 208px;	-o-transform-origin: 0 208px;	transform-origin: 0 208px;	-webkit-transform:skew(72deg);	-moz-transform:skew(72deg);	-ms-transform:skew(72deg);	-o-transform:skew(72deg);	transform:skew(72deg);}.ringThree {width:300px; height:300px; border:2px solid #ddd; border-radius:300px; position:absolute; left:148px; top:148px; background:#363; 	box-shadow: inset 0 0 5px rgba(0,0,0,0.8);}.ringThree b {width:150px; height:150px; position:absolute; left:150px; top:0; overflow:hidden;	-webkit-transform-origin: 0 150px;	-moz-transform-origin: 0 150px;	-ms-transform-origin: 0 150px;	-o-transform-origin: 0 150px;	transform-origin: 0 150px;}.ringThree b span {display:block;width:150px; height:150px; position:absolute; left:0; top:0; background:#a33; 	border-radius:0 150px 0 0; 	box-shadow: inset 0 0 5px rgba(0,0,0,0.8);	-webkit-transform-origin: 0 150px;	-moz-transform-origin: 0 150px;	-ms-transform-origin: 0 150px;	-o-transform-origin: 0 150px;	transform-origin: 0 150px;	-webkit-transform:skew(72deg);	-moz-transform:skew(72deg);	-ms-transform:skew(72deg);	-o-transform:skew(72deg);	transform:skew(72deg);}.ringFour {width:270px; height:270px; border:2px solid #ddd; border-radius:270px; position:absolute; left:163px; top:163px; background:#eec; 	box-shadow: inset 0 0 5px rgba(0,0,0,0.8);}.ringFour b {width:135px; height:135px; position:absolute; left:135px; top:0; overflow:hidden;	-webkit-transform-origin: 0 135px;	-moz-transform-origin: 0 135px;	-ms-transform-origin: 0 135px;	-o-transform-origin: 0 135px;	transform-origin: 0 135px;}.ringFour b span {display:block;width:135px; height:135px; position:absolute; left:0; top:0; background:#333; 	border-radius:0 135px 0 0; 	box-shadow: inset 0 0 5px rgba(0,0,0,0.8);	-webkit-transform-origin: 0 135px;	-moz-transform-origin: 0 135px;	-ms-transform-origin: 0 135px;	-o-transform-origin: 0 135px;	transform-origin: 0 135px;	-webkit-transform:skew(72deg);	-moz-transform:skew(72deg);	-ms-transform:skew(72deg);	-o-transform:skew(72deg);	transform:skew(72deg);}.ringFive {width:48px; height:48px; border:2px solid #ddd; border-radius:48px; position:absolute; left:274px; top:274px; background:#363; 	box-shadow: 0 0 5px rgba(0,0,0,0.8); 	box-shadow: inset 0 0 5px rgba(0,0,0,0.8);}.ringSix {width:20px; height:20px; border:2px solid #ddd; border-radius:20px; position:absolute; left:288px; top:288px; background:#a33; 	box-shadow: 0 0 5px rgba(0,0,0,0.8); 	box-shadow: inset 0 0 5px rgba(0,0,0,0.8);}.ringSeven {width:480px; height:480px; position:absolute; left:60px; top:60px;}.ringSeven b {display:block; width:2px; height:216px; position:absolute; left:239px; top:0; background:#ddd; box-shadow: 0 0 5px rgba(0,0,0,0.9);	-webkit-transform-origin:1px 241px;	-moz-transform-origin:1px 241px;	-ms-transform-origin:1px 241px;	-o-transform-origin:1px 241px;	transform-origin:1px 241px;}.ringSeven b.x1 {	-webkit-transform:rotate(9deg);	-moz-transform:rotate(9deg);	-ms-transform:rotate(9deg);	-o-transform:rotate(9deg);	transform:rotate(9deg);}.ringSeven b.x2 {	-webkit-transform:rotate(27deg);	-moz-transform:rotate(27deg);	-ms-transform:rotate(27deg);	-o-transform:rotate(27deg);	transform:rotate(27deg);}.ringSeven b.x3 {	-webkit-transform:rotate(45deg);	-moz-transform:rotate(45deg);	-ms-transform:rotate(45deg);	-o-transform:rotate(45deg);	transform:rotate(45deg);}.ringSeven b.x4 {	-webkit-transform:rotate(63deg);	-moz-transform:rotate(63deg);	-ms-transform:rotate(63deg);	-o-transform:rotate(63deg);	transform:rotate(63deg);}.ringSeven b.x5 {	-webkit-transform:rotate(81deg);	-moz-transform:rotate(81deg);	-ms-transform:rotate(81deg);	-o-transform:rotate(81deg);	transform:rotate(81deg);}.ringSeven b.x6 {	-webkit-transform:rotate(99deg);	-moz-transform:rotate(99deg);	-ms-transform:rotate(99deg);	-o-transform:rotate(99deg);	transform:rotate(99deg);}.ringSeven b.x7 {	-webkit-transform:rotate(117deg);	-moz-transform:rotate(117deg);	-ms-transform:rotate(117deg);	-o-transform:rotate(117deg);	transform:rotate(117deg);}.ringSeven b.x8 {	-webkit-transform:rotate(135deg);	-moz-transform:rotate(135deg);	-ms-transform:rotate(135deg);	-o-transform:rotate(135deg);	transform:rotate(135deg);}.ringSeven b.x9 {	-webkit-transform:rotate(153deg);	-moz-transform:rotate(153deg);	-ms-transform:rotate(153deg);	-o-transform:rotate(153deg);	transform:rotate(153deg);}.ringSeven b.x10 {	-webkit-transform:rotate(171deg);	-moz-transform:rotate(171deg);	-ms-transform:rotate(171deg);	-o-transform:rotate(171deg);	transform:rotate(171deg);}.ringSeven b.x11 {	-webkit-transform:rotate(189deg);	-moz-transform:rotate(189deg);	-ms-transform:rotate(189deg);	-o-transform:rotate(189deg);	transform:rotate(189deg);}.ringSeven b.x12 {	-webkit-transform:rotate(207deg);	-moz-transform:rotate(207deg);	-ms-transform:rotate(207deg);	-o-transform:rotate(207deg);	transform:rotate(207deg);}.ringSeven b.x13 {	-webkit-transform:rotate(225deg);	-moz-transform:rotate(225deg);	-ms-transform:rotate(225deg);	-o-transform:rotate(225deg);	transform:rotate(225deg);}.ringSeven b.x14 {	-webkit-transform:rotate(243deg);	-moz-transform:rotate(243deg);	-ms-transform:rotate(243deg);	-o-transform:rotate(243deg);	transform:rotate(243deg);}.ringSeven b.x15 {	-webkit-transform:rotate(261deg);	-moz-transform:rotate(261deg);	-ms-transform:rotate(261deg);	-o-transform:rotate(261deg);	transform:rotate(261deg);}.ringSeven b.x16 {	-webkit-transform:rotate(279deg);	-moz-transform:rotate(279deg);	-ms-transform:rotate(279deg);	-o-transform:rotate(279deg);	transform:rotate(279deg);}.ringSeven b.x17 {	-webkit-transform:rotate(297deg);	-moz-transform:rotate(297deg);	-ms-transform:rotate(297deg);	-o-transform:rotate(297deg);	transform:rotate(297deg);}.ringSeven b.x18 {	-webkit-transform:rotate(315deg);	-moz-transform:rotate(315deg);	-ms-transform:rotate(315deg);	-o-transform:rotate(315deg);	transform:rotate(315deg);}.ringSeven b.x19 {	-webkit-transform:rotate(333deg);	-moz-transform:rotate(333deg);	-ms-transform:rotate(333deg);	-o-transform:rotate(333deg);	transform:rotate(333deg);}.ringSeven b.x20 {	-webkit-transform:rotate(351deg);	-moz-transform:rotate(351deg);	-ms-transform:rotate(351deg);	-o-transform:rotate(351deg);	transform:rotate(351deg);}</style></head><body><div class="boomerang">	<div class="outerRing"></div>	<div class="numbersTop p11">11</div>	<div class="numbersTop p14">14</div>	<div class="numbersTop p9">9</div>	<div class="numbersTop p12">12</div>	<div class="numbersTop p5">5</div>	<div class="numbersTop p20">20</div>	<div class="numbersTop p1">1</div>	<div class="numbersTop p18">18</div>	<div class="numbersTop p4">4</div>	<div class="numbersTop p13">13</div>	<div class="numbersTop p6">6</div>	<div class="numbersBottom p8">8</div>	<div class="numbersBottom p16">16</div>	<div class="numbersBottom p7">7</div>	<div class="numbersBottom p19">19</div>	<div class="numbersBottom p3">3</div>	<div class="numbersBottom p17">17</div>	<div class="numbersBottom p2">2</div>	<div class="numbersBottom p15">15</div>	<div class="numbersBottom p10">10</div>	<div class="ringOne">		<b class="b1"><span></span></b>		<b class="b2"><span></span></b>		<b class="b3"><span></span></b>		<b class="b4"><span></span></b>		<b class="b5"><span></span></b>		<b class="b6"><span></span></b>		<b class="b7"><span></span></b>		<b class="b8"><span></span></b>		<b class="b9"><span></span></b>		<b class="b10"><span></span></b>	</div>	<div class="ringTwo">		<b class="b1"><span></span></b>		<b class="b2"><span></span></b>		<b class="b3"><span></span></b>		<b class="b4"><span></span></b>		<b class="b5"><span></span></b>		<b class="b6"><span></span></b>		<b class="b7"><span></span></b>		<b class="b8"><span></span></b>		<b class="b9"><span></span></b>		<b class="b10"><span></span></b>	</div>	<div class="ringThree">		<b class="b1"><span></span></b>		<b class="b2"><span></span></b>		<b class="b3"><span></span></b>		<b class="b4"><span></span></b>		<b class="b5"><span></span></b>		<b class="b6"><span></span></b>		<b class="b7"><span></span></b>		<b class="b8"><span></span></b>		<b class="b9"><span></span></b>		<b class="b10"><span></span></b>	</div>	<div class="ringFour">		<b class="b1"><span></span></b>		<b class="b2"><span></span></b>		<b class="b3"><span></span></b>		<b class="b4"><span></span></b>		<b class="b5"><span></span></b>		<b class="b6"><span></span></b>		<b class="b7"><span></span></b>		<b class="b8"><span></span></b>		<b class="b9"><span></span></b>		<b class="b10"><span></span></b>	</div>	<div class="ringFive"></div>	<div class="ringSix"></div>	<div class="ringSeven">		<b class="x1"></b>		<b class="x2"></b>		<b class="x3"></b>		<b class="x4"></b>		<b class="x5"></b>		<b class="x6"></b>		<b class="x7"></b>		<b class="x8"></b>		<b class="x9"></b>		<b class="x10"></b>		<b class="x11"></b>		<b class="x12"></b>		<b class="x13"></b>		<b class="x14"></b>		<b class="x15"></b>		<b class="x16"></b>		<b class="x17"></b>		<b class="x18"></b>		<b class="x19"></b>		<b class="x20"></b>	</div></div></body></html>

上一篇：CSS3动画遮罩文字特效

下一篇：CSS3 圆形时钟式网页进度条