css3 画圆记录
<style>
.radar-wrapper * {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.wrapper-container {
width: 850px;
height: 1000px;
margin-top: 50px;
position: relative;
}
.wrapper-container ul {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
transform-origin: 0 0;
}
</style>
<style>
.radar-wrapper {
width: 800px;
height: 800px;
position: relative;
}
.radar-wrapper .wrapper-item {
border-radius: 50%;
overflow: hidden;
position: absolute;
border: 1px solid #ddd;
}
.radar-wrapper ul.hover {
z-index: 99999 !important;
}
.radar-wrapper .p1 {
width: 200px;
height: 200px;
left: 300px;
top: 300px;
z-index: 8;
}
.radar-wrapper .p1 ul li {
width: 100px;
height: 100px;
}
.radar-wrapper .p1 ul {
z-index: 8;
}
.radar-wrapper .p1 ul li a:hover {
background: #F98484;
}
.radar-wrapper .p1 ul li a.hover {
background: #F98484;
}
.radar-wrapper .p2 {
width: 400px;
height: 400px;
left: 200px;
top: 200px;
z-index: 7;
}
.radar-wrapper .p2 ul li {
width: 200px;
height: 200px;
}
.radar-wrapper .p2 ul {
z-index: 7;
}
.radar-wrapper .p2 ul li a:hover {
background: #E24040;
}
.radar-wrapper .p2 ul li a.hover {
background: #E24040;
}
.radar-wrapper .p3 {
width: 600px;
height: 600px;
left: 100px;
top: 100px;
z-index: 4;
}
.radar-wrapper .p3 ul li {
width: 300px;
height: 300px;
}
.radar-wrapper .p3 ul {
z-index: 4;
}
.radar-wrapper .p3 ul li a:hover {
background: #D20707;
}
.radar-wrapper .p3 ul li a.hover {
background: #D20707;
}
.radar-wrapper .p4 {
width: 800px;
height: 800px;
left: 0px;
top: 0px;
z-index: 1;
}
.radar-wrapper .p4 ul li {
width: 400px;
height: 400px;
}
.radar-wrapper .p4 ul {
z-index: 1;
}
.radar-wrapper .p4 ul li a:hover {
background: #880505;
}
.radar-wrapper .p4 ul li a.hover {
background: #880505;
}
.radar-wrapper ul li {
left: 0;
top: 0;
position: absolute;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.radar-wrapper ul li:nth-child(1) {
transform: rotate(0deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(2) {
transform: rotate(22.5deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(3) {
transform: rotate(45deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(4) {
transform: rotate(67.5deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(5) {
transform: rotate(90deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(6) {
transform: rotate(112.5deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(7) {
transform: rotate(135deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(8) {
transform: rotate(157.5deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(9) {
transform: rotate(180deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(10) {
transform: rotate(202.5deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(11) {
transform: rotate(225deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(12) {
transform: rotate(247.5deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(13) {
transform: rotate(270deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(14) {
transform: rotate(292.5deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(15) {
transform: rotate(315deg) skew(67.5deg);
}
.radar-wrapper ul li:nth-child(16) {
transform: rotate(337.5deg) skew(67.5deg);
}
.radar-wrapper ul li a {
background-color: #DAB7B7;
width: 100%;
height: 100%;
display: block;
transform-origin: 0 0;
border: 1px solid #ddd;
}
</style>
<style>
.name-wrapper {
width: 500px;
height: 500px;
left: 400px;
top: 400px;
position: absolute;
}
.name-wrapper .wrapper-item {
position: relative;
}
.name-wrapper ul li a {
position: absolute;
display: block;
width: 100px;
padding-left: 400px;
border-radius: 0 0 300px 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
text-decoration: none;
}
.name-wrapper ul li a span {
transform: rotate(103deg);
display: block;
text-align: center;
transform-origin: 3px 35px;
}
.name-wrapper ul li:nth-child(1) a {
transform: rotate(0deg);
}
.name-wrapper ul li:nth-child(2) a {
transform: rotate(22.5deg);
}
.name-wrapper ul li:nth-child(3) a {
transform: rotate(45deg);
}
.name-wrapper ul li:nth-child(4) a {
transform: rotate(67.5deg);
}
.name-wrapper ul li:nth-child(5) a {
transform: rotate(90deg);
}
.name-wrapper ul li:nth-child(6) a {
transform: rotate(112.5deg);
}
.name-wrapper ul li:nth-child(7) a {
transform: rotate(135deg);
}
.name-wrapper ul li:nth-child(8) a {
transform: rotate(157.5deg);
}
.name-wrapper ul li:nth-child(9) a {
transform: rotate(180deg);
}
.name-wrapper ul li:nth-child(10) a {
transform: rotate(202.5deg);
}
.name-wrapper ul li:nth-child(11) a {
transform: rotate(225deg);
}
.name-wrapper ul li:nth-child(12) a {
transform: rotate(247.5deg);
}
.name-wrapper ul li:nth-child(13) a {
transform: rotate(270deg);
}
.name-wrapper ul li:nth-child(14) a {
transform: rotate(292.5deg);
}
.name-wrapper ul li:nth-child(15) a {
transform: rotate(315deg);
}
.name-wrapper ul li:nth-child(16) a {
transform: rotate(337.5deg);
}
</style><div class="wrapper-container ">
<div class="radar-wrapper">
<div class="p1 wrapper-item">
<ul>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
</ul>
</div>
<div class="p2 wrapper-item">
<ul>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
</ul>
</div>
<div class="p3 wrapper-item">
<ul>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
</ul>
</div>
<div class="p4 wrapper-item">
<ul>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
</ul>
</div>
<div class="p5 wrapper-item">
<ul>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
<li>
<a herf="javascript:void(0);"></a>
</li>
</ul>
</div>
</div>
<div class="name-wrapper">
<div class="wrapper-item">
<ul>
<li>
<a herf="javascript:void(0);"><span>语文</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>数学</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>英语</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>物理</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>化学</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>生物</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>历史</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>政治</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>地理</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>体育</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>美术</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>音乐</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>信息技术</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>通用技术</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>心理</span></a>
</li>
<li>
<a herf="javascript:void(0);"><span>学校活动</span></a>
</li>
</ul>
</div>
</div>
</div>
- 上一篇 »纯css3 开关按钮
- 下一篇 »一些CSS3功能的介绍
相关推荐
CSS3参考手册
很好用的CSS3APIhttp://www.css88.com/book/css/
时间：2024-01-28 08:48
