当前位置：编程学习 > JS >>

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

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(

上一个：使用transform和transition制作CSS3动画
下一个：HTML5网页Loading加载效果

更多图片编程知识:
更多JS疑问解答：
几个验证11位手机号码格式的js代码
js把图片转换成 base64代码
js把base代码转换成图片
JS 将 base64编码的图片转化为图片文件
js中的定时器
js如何获得FCKeditor控件的值
用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
JS验证，这块“牛皮”反复修改都不能实现
在JS中使用DOM模型
如何用JS 获取本地文件夹的文件列表
js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
求实现自动生成图片缩略图的JS代码
JS脚本网页问题
js，代码中"object"和"Object"区别？
js+flash实现网页图片切换效果，出现边框，单击激活此控件。
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
微信小程序
thinkphp
如果你遇到编程学习难题：
访问www.zzzyk.com 试试
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络，