css3 画圆记录
<style>
.radar-wrapper * {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:;
padding:;
list-style: none;
position: relative;
} .wrapper-container {
width: 850px;
height: 1000px;
margin-top: 50px;
position: relative;
} .wrapper-container ul {
padding:;
margin:;
list-style: none;
position: absolute;
left:;
top:;
width:;
height:;
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:;
} .radar-wrapper .p1 ul li {
width: 100px;
height: 100px;
} .radar-wrapper .p1 ul {
z-index:;
} .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:;
} .radar-wrapper .p2 ul li {
width: 200px;
height: 200px;
} .radar-wrapper .p2 ul {
z-index:;
} .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:;
} .radar-wrapper .p3 ul li {
width: 300px;
height: 300px;
} .radar-wrapper .p3 ul {
z-index:;
} .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:;
} .radar-wrapper .p4 ul li {
width: 400px;
height: 400px;
} .radar-wrapper .p4 ul {
z-index:;
} .radar-wrapper .p4 ul li a:hover {
background: #880505;
} .radar-wrapper .p4 ul li a.hover {
background: #880505;
} .radar-wrapper ul li {
left:;
top:;
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中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
- 使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...
- 如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
- 使用css3画饼图
CSS3 Gradient介绍参考地址: http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html http: ...
- 操作系统实验 windows编程多线程 生产者消费者问题 画圆画方(内置bug版)
实验3:随便写的 #include <windows.h> #include <string> #include <stdio.h> #pragma warning ...
- WebGIS中基于AGS的画圆查询简析以及通过Polygon来构造圆的算法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 某个项目需求中需要在前端进行画圆查询,将圆范围上的多边形要素 ...
- 《图形学》实验六：中点Bresenham算法画圆
开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 500 ...
- css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
- ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
一.前言 吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维.在上一篇笔记里,我已经实现了自定义的地图测量模块.在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半 ...
随机推荐
- mysql输入密码后闪退怎么办？
第一: 首先需要想到的是mysql的服务可能没开,首先打开mysql的服务 第二: 打开Mysql的命令行输入密码即可 第三: 登录成功 第四: 顺便验证自己安装的mysql是否成功 输入显示所有数据 ...
- Android 学习之--android多线程断点下载
我们平时都用"迅雷"下载软件,当下载到一半的时候突然断网,下次开启的时候能够从上次下载的地方继续下载,而且下载速度很快,那么这是怎么做到的呢! 其实它的“快”其实就是多线程的下载实 ...
- JavaWeb学习总结(十二)——Session
一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务 ...
- Multiplexing SDIO Devices Using MAX II or CoolRunner-II CPLD
XAPP906 Supporting Multiple SD Devices with CoolRunner-II CPLDs There has been an increasing demand ...
- React中props.children和React.Children的区别
在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...
- Revit2013工具栏工具无法显示BUG
该BUG在Revit2013版中存在,主要症状就是当你激活某些工具的时候,上部工具栏中本应该显示的上下文工具显示不出来,比如当你选中模型中的风管的时候,正常情况下工具栏应该是这个样子. 但是在Revi ...
- 在Servlet中出现一个输出中文乱码的问题(已经解)。
在Servlet中出现一个输出中文乱码的问题,已经解. @Override public void doPost(HttpServletRequest reqeust, HttpServletResp ...
- 成功在神舟K650c-i7 d2（i7-4700MQ、HM87）上装好了Windows XP
成功在神舟K650c-i7 d2(i7-4700MQ.HM87)上装好了Windows XP 本来已经在K650c上装好了Windows7.Windows8双系统,奈何某些旧软件只能在Windows ...
- Jmeter之JDBC Request使用方法(oracle)
JDBC Request: 这个sampler可以向数据库发送一个jdbc请求(sql语句),它经常需要和JDBC Connection Configuration 配置元件一起配合使用. 目录: 一 ...
- IOS UISearchDisplayController 点击搜索出现黑条问题解决方案
最近项目遇到一个很奇葩的问题 点击按钮启动 presentViewController 的时候出现下图效果: 代码: AddFriendViewController *addFriendVC = [[ ...