css3的饼图

mutongwu

浏览: 452451 次
性别:
来自: 广州

最近访客更多访客>>

lxswfc

xjg9083

oszerone

micai_1234

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

DOM
CSS
HTML

来自：http://atomicnoggin.ca/test/pie-chart.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure CSS3 Pie Charts</title>
<style>
body {
	font-family:Tahoma, Geneva, sans-serif;
}
h2 {
	text-align:center;
}
.chart {
	position:relative;
	width:500px;
	height:250px;
}
.hold {
	position:absolute;
	width:200px;
	height:200px;
	clip:rect(0px,200px,200px,100px);
	left:300px;
}
.pie {
	position:absolute;
/*	width:100px;
	height:200px;
	-moz-border-radius:100px 0 0 100px;
	-webkit-border-radius:100px 0 0 100px; 
	border-radius:100px 0 0 100px;
	-moz-transform-origin:right center;
	-webkit-transform-origin:right center;
	transform-origin:right center; */
	width:200px;
	height:200px;
	clip:rect(0px,100px,200px,0px);
	-moz-border-radius:100px;
	-webkit-border-radius:100px; 
	border-radius:100px; 
}
.hold.gt50 {
	clip:rect(auto, auto, auto, auto);
}
.pie.fill {
	-moz-transform:rotate(180deg) !important;
	-webkit-transform:rotate(180deg) !important;
	-o-transform:rotate(180deg) !important;
	transform:rotate(180deg) !important;
}
.legend {
	clear:left;
	float:left;
	font-size:12px;
	border:2px solid grey;
	padding:5px;
	width:200px;
}
.legend DIV {
	margin:3px 0;
}
.legend span {
	float:right;
	padding-left:.5em;
}
#browse-FF {
	margin-left:10px;
	margin-top:-10px;
}
#browse-FF .pie {
	background-color:orange;
	border-color:orange;
	-moz-transform:rotate(116.28deg);
	-webkit-transform:rotate(116.28deg);
	-o-transform:rotate(116.28deg);
	transform:rotate(116.28deg);
}
#browse-FF-lbl {
	border-left:orange solid 1em;
	padding-left:.5em;
}
#browse-IE {
	-moz-transform:rotate(116.28deg);
	-webkit-transform:rotate(116.28deg);
	-o-transform:rotate(116.28deg);
	transform:rotate(116.28deg);
}
#browse-IE .pie {
	background-color:blue;
	border-color:blue;
	-moz-transform:rotate(109.8deg);
	-webkit-transform:rotate(109.8deg);
	-o-transform:rotate(109.8deg);
	transform:rotate(109.8deg);
}
#browse-IE-lbl {
	border-left:blue solid 1em;
	padding-left:.5em;
}
#browse-Safari {
	-moz-transform:rotate(226.08deg);
	-webkit-transform:rotate(226.08deg);
	-o-transform:rotate(226.08deg);
	transform:rotate(226.08deg);
}
#browse-Safari .pie {
	background-color:purple;
	border-color:purple;
	-moz-transform:rotate(10.08deg);
	-webkit-transform:rotate(10.08deg);
	-o-transform:rotate(10.08deg);
	transform:rotate(10.08deg);
}
#browse-Safari-lbl {
	border-left:purple solid 1em;
	padding-left:.5em;
}
#browse-Chrome {
	-moz-transform:rotate(236.16deg); 
	-webkit-transform:rotate(236.16deg); 
	-o-transform:rotate(236.16deg); 
	transform:rotate(236.16deg); 
}
#browse-Chrome .pie {
	background-color:darkcyan;
	border-color:darkcyan;
	-moz-transform:rotate(6.12deg); 
	-webkit-transform:rotate(6.12deg); 
	-o-transform:rotate(6.12deg); 
	transform:rotate(6.12deg); 
}
#browse-Chrome-lbl {
	border-left:darkcyan solid 1em;
	padding-left:.5em;
}
#browse-Other {
	-moz-transform:rotate(242.28deg); 
	-webkit-transform:rotate(242.28deg); 
	-o-transform:rotate(242.28deg); 
	transform:rotate(242.28deg); 
}
#browse-Other .pie {
	background-color:salmon;
	border-color:salmon;
	-moz-transform:rotate(5.76deg); 
	-webkit-transform:rotate(5.76deg); 
	-o-transform:rotate(5.76deg); 
	transform:rotate(5.76deg); 
}
#browse-Other-lbl {
	border-left:salmon solid 1em;
	padding-left:.5em;
}
#browse-Unknown {
	-moz-transform:rotate(248.04deg);
	-webkit-transform:rotate(248.04deg); 
	-o-transform:rotate(248.04deg); 
	transform:rotate(248.04deg); 
}
#browse-Unknown .pie {
	background-color:grey;
	border-color:grey;
	-moz-transform:rotate(111.96deg); 
	-webkit-transform:rotate(111.96deg); 
	-o-transform:rotate(111.96deg);
	transform:rotate(111.96deg);
}
#browse-Unknown-lbl {
	border-left:grey solid 1em;
	padding-left:.5em;
}
#os-Win {
	margin-left:10px;
	margin-top:10px;
}
#os-Win .pie {
	background-color:blue;
	border-color:blue;
	-moz-transform:rotate(229.32deg); 
	-webkit-transform:rotate(229.32deg); 
	-o-transform:rotate(229.32deg);
	transform:rotate(229.32deg);
}
#os-Win-lbl {
	border-left:blue solid 1em;
	padding-left:.5em;
}
#os-Mac {
	-moz-transform:rotate(229.32deg); 
	-webkit-transform:rotate(229.32deg);
	-o-transform:rotate(229.32deg); 
	transform:rotate(229.32deg); 
}
#os-Mac .pie {
	background-color:purple;
	border-color:purple;
	-moz-transform:rotate(21.6deg); 
	-webkit-transform:rotate(21.6deg);
	-o-transform:rotate(21.6deg); 
	transform:rotate(21.6deg); 
}
#os-Mac-lbl {
	border-left:purple solid 1em;
	padding-left:.5em;
}
#os-Other {
	-moz-transform:rotate(250.92deg); 
	-webkit-transform:rotate(250.92deg); 
	-o-transform:rotate(250.92deg); 
	transform:rotate(250.92deg); 
}
#os-Other .pie {
	background-color:grey;
	border-color:grey;
	-moz-transform:rotate(109.44deg); 
	-webkit-transform:rotate(109.44deg); 
	-o-transform:rotate(109.44deg); 
	transform:rotate(109.44deg); 
}
#os-Other-lbl {
	border-left:grey solid 1em;
	padding-left:.5em;
}
</style>
</head>
<body>
<div class="chart">
  <h2>Browser Usage</h2>
  <div class="legend">
    <div id="browse-FF-lbl">Firefox <span>32.3%</span></div>
    <div id="browse-IE-lbl">Internet Explorer <span>30.5%</span></div>
    <div id="browse-Safari-lbl">Safari <span>2.8%</span></div>
    <div id="browse-Chrome-lbl">Chrome <span>1.7%</span></div>
    <div id="browse-Other-lbl">Other <span>1.6%</span></div>
    <div id="browse-Unknown-lbl">Uknown <span>31.1%</span></div>
  </div>
  <div id="browse-IE" class="hold">
    <div class="pie"></div>
  </div>
  <div id="browse-FF" class="hold">
    <div class="pie"></div>
  </div>
  <div id="browse-Safari" class="hold">
    <div class="pie"></div>
  </div>
  <div id="browse-Chrome" class="hold">
    <div class="pie"></div>
  </div>
  <div id="browse-Other" class="hold">
    <div class="pie"></div>
  </div>
  <div id="browse-Unknown" class="hold">
    <div class="pie"></div>
  </div>
</div>
<div class="chart">
  <h2>Operating System</h2>
  <div class="legend">
    <div id="os-Win-lbl">Windows <span>63.7%</span></div>
    <div id="os-Mac-lbl">Macintosh <span>6.0%</span></div>
    <div id="os-Other-lbl">Other<span>30.4%</span></div>
  </div>
  <div id="os-Win" class="hold gt50">
    <div class="pie"></div>
    <div class="pie fill"></div>
  </div>
  <div id="os-Mac" class="hold">
    <div class="pie"></div>
  </div>
  <div id="os-Other" class="hold">
    <div class="pie"></div>
  </div>
</div>
<p>The two charts above are created comletely with CSS3 properties and contain no images whatsoever.<br />
<a href="/blog/2010/02/20/pure-css3-pie-charts/">Back to blog post</a></p>
</body>
</html>

分享到：

执行innerHTML时候，代码片段的js | phonegap修改程序图标、名称，添加插件

2013-12-31 15:12
浏览 1241
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

受激拉曼散射计量【Stimulated-Raman-Scattering Metrology】附Matlab代码.rar: 1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

MMC整流器技术解析：基于Matlab的双闭环控制策略与环流抑制性能研究,Matlab下的MMC整流器技术文档：18个子模块，双闭环控制稳定直流电压，环流抑制与最近电平逼近调制，优化桥臂电流波形，高效: MMC整流器技术解析：基于Matlab的双闭环控制策略与环流抑制性能研究,Matlab下的MMC整流器技术文档：18个子模块，双闭环控制稳定直流电压，环流抑制与最近电平逼近调制，优化桥臂电流波形，高效并网运行。,MMC整流器（Matlab），技术文档 1.MMC工作在整流侧，子模块个数N＝18，直流侧电压Udc＝25.2kV，交流侧电压6.6kV 2.控制器采用双闭环控制，外环控制直流电压，采用PI调节器，电流内环采用PI＋前馈解耦； 3.环流抑制采用PI控制，能够抑制环流二倍频分量； 4.采用最近电平逼近调制（NLM）， 5.均压排序：电容电压排序采用冒泡排序，判断桥臂电流方向确定投入切除；结果： 1.输出的直流电压能够稳定在25.2kV； 2.有功功率，无功功率稳态时波形稳定，有功功率为3.2MW，无功稳定在0Var； 3.网侧电压电流波形均为对称的三相电压和三相电流波形，网侧电流THD＝1.47％<2％，符合并网要求； 4.环流抑制后桥臂电流的波形得到改善，桥臂电流THD由9.57％降至1.93％，环流波形也可以看到得到抑制； 5.电容电压能够稳定变化 ,工作点关键词：MMC

Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪：基于功率反馈的扰动观察法调整电压方向研究,Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪：基: Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪：基于功率反馈的扰动观察法调整电压方向研究,Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪：基于功率反馈的扰动观察法调整电压方向研究,Boost二级升压光伏并网结构，Simulink建模，MPPT最大功率点追踪，扰动观察法采用功率反馈方式，若ΔP>0，说明电压调整的方向正确，可以继续按原方向进行“干扰”；若ΔP<0，说明电压调整的方向错误，需要对“干扰”的方向进行改变。 ,Boost升压;光伏并网结构;Simulink建模;MPPT最大功率点追踪;扰动观察法;功率反馈;电压调整方向。,光伏并网结构中Boost升压MPPT控制策略的Simulink建模与功率反馈扰动观察法

STM32F103C8T6 USB寄存器开发详解(12)-键盘设备: STM32F103C8T6 USB寄存器开发详解(12)-键盘设备

2011-2020广东21市科技活动人员数: 科技活动人员数专指直接从事科技活动以及专门从事科技活动管理和为科技活动提供直接服务的人员数量

Matlab Simulink仿真探究Flyback反激式开关电源性能表现与优化策略,Matlab Simulink仿真探究Flyback反激式开关电源的工作机制,Matlab Simulimk仿真: Matlab Simulink仿真探究Flyback反激式开关电源性能表现与优化策略,Matlab Simulink仿真探究Flyback反激式开关电源的工作机制,Matlab Simulimk仿真，Flyback反激式开关电源仿真 ,Matlab; Simulink仿真; Flyback反激式; 开关电源仿真,Matlab Simulink在Flyback反激式开关电源仿真中的应用

基于Comsol的埋地电缆电磁加热计算模型：深度解析温度场与电磁场分布学习资料与服务,COMSOL埋地电缆电磁加热计算模型：温度场与电磁场分布的解析与学习资源,comsol 埋地电缆电磁加热计算模型: 基于Comsol的埋地电缆电磁加热计算模型：深度解析温度场与电磁场分布学习资料与服务,COMSOL埋地电缆电磁加热计算模型：温度场与电磁场分布的解析与学习资源,comsol 埋地电缆电磁加热计算模型，可以得到埋地电缆温度场及电磁场分布，提供学习资料和服务， ,comsol;埋地电缆电磁加热计算模型;温度场分布;电磁场分布;学习资料;服务,Comsol埋地电缆电磁加热模型：温度场与电磁场分布学习资料及服务

ibus-table-chinese-yong-1.4.6-3.el7.x64-86.rpm.tar.gz: 1、文件内容：ibus-table-chinese-yong-1.4.6-3.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/ibus-table-chinese-yong-1.4.6-3.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持：公众号禅静编程坊

基于51单片机protues仿真的汽车智能灯光控制系统设计（仿真图、源代码）: 基于51单片机protues仿真的汽车智能灯光控制系统设计（仿真图、源代码）一、设计项目根据本次设计的要求，设计出一款基于51单片机的自动切换远近光灯的设计。技术条件与说明： 1. 设计硬件部分，中央处理器采用了STC89C51RC单片机； 2. 使用两个灯珠代表远近光灯，感光部分采用了光敏电阻，因为光敏电阻输出的是电压模拟信号，单片机不能直接处理模拟信号，所以经过ADC0832进行转化成数字信号； 3. 显示部分采用了LCD1602液晶，还增加按键部分电路，可以选择手自动切换远近光灯； 4. 用超声模块进行检测距离；

altermanager的企业微信告警服务: altermanager的企业微信告警服务

MyAgent测试版本在线下载: MyAgent测试版本在线下载

Comsol技术：可调BIC应用的二氧化钒VO2材料探索,Comsol模拟二氧化钒VO2的可调BIC特性研究,Comsol二氧化钒VO2可调BIC ,Comsol; 二氧化钒VO2; 可调BIC: Comsol技术：可调BIC应用的二氧化钒VO2材料探索,Comsol模拟二氧化钒VO2的可调BIC特性研究,Comsol二氧化钒VO2可调BIC。 ,Comsol; 二氧化钒VO2; 可调BIC,Comsol二氧化钒VO2材料：可调BIC技术的关键应用

C++学生成绩管理系统源码.zip: C++学生成绩管理系统源码

基于Matlab与Cplex的激励型需求响应模式：负荷转移与电价响应的差异化目标函数解析,基于Matlab与CPLEX的激励型需求响应负荷转移策略探索,激励型需求响应 matlab +cplex 激励: 基于Matlab与Cplex的激励型需求响应模式：负荷转移与电价响应的差异化目标函数解析,基于Matlab与CPLEX的激励型需求响应负荷转移策略探索,激励型需求响应 matlab +cplex 激励型需求响应采用激励型需求响应方式对负荷进行转移，和电价响应模式不同，具体的目标函数如下 ,激励型需求响应; matlab + cplex; 负荷转移; 目标函数。,Matlab与Cplex结合的激励型需求响应模型及其负荷转移策略

scratch介绍（scratch说明）.zip: scratch介绍（scratch说明）.zip

深度学习模型的发展历程及其关键技术在人工智能领域的应用: 内容概要：本文全面介绍了深度学习模型的概念、工作机制和发展历程，详细探讨了神经网络的构建和训练过程，包括反向传播算法和梯度下降方法。文中还列举了深度学习在图像识别、自然语言处理、医疗和金融等多个领域的应用实例，并讨论了当前面临的挑战，如数据依赖、计算资源需求、可解释性和对抗攻击等问题。最后，文章展望了未来的发展趋势，如与量子计算和区块链的融合，以及在更多领域的应用前景。适合人群：对该领域有兴趣的技术人员、研究人员和学者，尤其适合那些希望深入了解深度学习原理和技术细节的读者。使用场景及目标：①理解深度学习模型的基本原理和结构；②了解深度学习模型的具体应用案例；③掌握应对当前技术挑战的方向。阅读建议：文章内容详尽丰富，读者应在阅读过程中注意理解各个关键技术的概念和原理，尤其是神经网络的构成及训练过程。同时也建议对比不同模型的特点及其在具体应用中的表现。

day02供应链管理系统-补充.zip: 该文档提供了一个关于供应链管理系统开发的详细指南，重点介绍了项目安排、技术实现和框架搭建的相关内容。文档分为以下几个关键部分：项目安排：主要步骤包括搭建框架（1天），基础数据模块和权限管理（4天），以及应收应付和销售管理（5天）。供应链概念：供应链系统的核心流程是通过采购商品放入仓库，并在销售时从仓库提取商品，涉及三个主要订单：采购订单、销售订单和调拨订单。大数据的应用：介绍了数据挖掘、ETL（数据抽取）和BI（商业智能）在供应链管理中的应用。技术实现：讲述了DAO（数据访问对象）的重用、服务层的重用、以及前端JS的继承机制、jQuery插件开发等技术细节。系统框架搭建：包括Maven环境的配置、Web工程的创建、持久化类和映射文件的编写，以及Spring配置文件的实现。 DAO的需求和功能：供应链管理系统的各个模块都涉及分页查询、条件查询、删除、增加、修改操作等需求。泛型的应用：通过示例说明了在Java语言中如何使用泛型来实现模块化和可扩展性。文档非常技术导向，适合开发人员参考，用于构建供应链管理系统的架构和功能模块。

清华大学104页《Deepseek:从入门到精通》: 这份长达104页的手册由清华大学新闻与传播学院新媒体研究中心元宇宙文化实验室的余梦珑博士后及其团队精心编撰，内容详尽，覆盖了从基础概念、技术原理到实战案例的全方位指导。它不仅适合初学者快速了解DeepSeek的基本操作，也为有经验的用户提供了高级技巧和优化策略。

MXTU MAX仿毒舌自适应主题源码苹果CMSv10模板.zip: 主题说明： 1、将mxtheme目录放置根目录 | 将mxpro目录放置template文件夹中 2、苹果cms后台-系统-网站参数配置-网站模板-选择mxpro 模板目录填写html 3、网站模板选择好之后一定要先访问前台，然后再进入后台设置 4、主题后台地址： MXTU MAX图图主题,/admin.php/admin/mxpro/mxproset admin.php改成你登录后台的xxx.php 5、首页幻灯片设置视频推荐9，自行后台设置 6、追剧周表在视频数据中，节目周期添加周一至周日自行添加，格式：一,二,三,四,五,六,日

基于matlab平台的数字信号处理GUI设计.zip: 运行GUI版本，可二开

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css3的饼图

评论

发表评论

相关推荐

简单下拉框模拟

四个方向鼠标滑入的css动画

icon font VS svg font

简单的css3全屏滚动-左右方向

简单的css3全屏滚动

纯CSS3的图片slider

移动端的“点透”问题

如何读写伪类元素的样式？

模拟滚动条

纯CSS3的loading图案

纯CSS3的图片集点击放大

css3 简单slider

执行innerHTML时候，代码片段的js

图片倒影

动态添加style元素

备份一个简单的分页条

iframe跨域的 高度自适应

页面布局：分5个区域

表单提交至iframe

innerText VS textContent

最近访客更多访客>>

iframe跨域的高度自适应