欢迎您来到懒之才-站长的分享平台!   学会偷懒，并懒出境界是提高工作效率最有效的方法！
添加收藏
站内帮助
站内留言
首页 > 经验分享 > Css&Div > CSS3 飞镖盘，超酷效果，另人震惊

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

2018-08-31 2939 收藏 0 赞一个 0 真差劲 0 去评论

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

代码如下：

<!DOCTYPE HTML>
<html>
<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>
    <div></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>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
    </div>
    <div>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
    </div>
    <div>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
    </div>
    <div>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
        <b><span></span></b>
    </div>
    <div></div>
    <div></div>
    <div>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
    </div>
</div>
</body>
</html>

效果如图：

QQ截图20180831094442.jpg

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

大家评论
站长推荐
点击排行