html5中表格如何等分,纯css3饼图五等分
先看效果图：
HTML代码如下：
pie
良好
优秀
未提交
需努力
加油
98%
得分率
css代码如下：
.pinOfStudent{
background-color: #ffffff;
width: 100%;
position: relative;
}
#tipZone{
position:relative;
left:0;
right:0;
top: 1em;
width:12.5em;
height:12.5em;
margin: 0 auto;
}
#base1 {
margin-top:10px;
z-index:1;
}
#base1 .bing {
background-color: #af9df7;
border-color: #af9df7;
-moz-transform:rotate(72deg);
-webkit-transform:rotate(72deg);
-o-transform:rotate(72deg);
transform: rotate(72deg);
}
#base2{
margin-top:10px;
-moz-transform:rotate(72deg);
-webkit-transform:rotate(72deg);
-o-transform:rotate(72deg);
transform:rotate(72deg);
}
#base2 .bing {
background-color: #93dec8;
border-color: #93dec8;
-moz-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
-o-transform: rotate(72deg);
transform: rotate(72deg);
}
#base3{
margin-top:10px;
-moz-transform:rotate(144deg);
-webkit-transform:rotate(144deg);
-o-transform:rotate(144deg);
transform:rotate(144deg);
}
#base3 .bing{
background-color:#efb486;
border-color:#efb486;
-moz-transform:rotate(72deg);
-webkit-transform:rotate(72deg);
-o-transform:rotate(72deg);
transform:rotate(72deg);
}
#base4{
margin-top:10px;
-moz-transform:rotate(216deg);
-webkit-transform:rotate(216deg);
-o-transform:rotate(216deg);
transform:rotate(216deg);
}
#base4 .bing{
background-color:#f2b6c8;
border-color:#f2b6c8;
-moz-transform:rotate(72deg);
-webkit-transform:rotate(72deg);
-o-transform:rotate(72deg);
transform:rotate(72deg);
}
#base5{
margin-top:10px;
-moz-transform:rotate(288deg);
-webkit-transform:rotate(288deg);
-o-transform:rotate(288deg);
transform:rotate(288deg);
}
#base5 .bing{
background-color:#cae9ff;
border-color:#cae9ff;
-moz-transform:rotate(72deg);
-webkit-transform:rotate(72deg);
-o-transform:rotate(72deg);
transform:rotate(72deg);
}
.part{
position:absolute;
width: 100%;
height: 100%;
clip: rect(0em,12.5em,12.5em,6.25em);
}
.effective1{
margin-top: -0.1rem !important;
margin-left: 0.56rem;
z-index: 0 !important;
}
.effective1 .bing{
background-color: #866af3 !important;
border-color: #866af3 !important;
}
.effective2{
margin-top: 0.18rem !important;
margin-left: 0.2rem;
}
.effective2 .bing{
background-color: #3ccda3 !important;
border-color: #3ccda3 !important;
}
.effective3{
margin-top: 1.4em !important;
margin-left: 0em;
}
.effective3 .bing{
background-color: #fa9241 !important;
border-color: #fa9241 !important;
}
.effective4{
margin-top: 0.55em !important;
margin-left: -0.7em;
}
.effective4 .bing{
background-color: #f680a4 !important;
border-color: #f680a4 !important;
}
.effective5{
margin-top: -0.1rem !important;
margin-left: -0.13rem;
}
.effective5 .bing{
background-color: #1f9cf5 !important;
border-color: #1f9cf5 !important;
}
.bing {
position:absolute;
width:12.5em;
height:12.5em;
clip:rect(0px,6.25em,12.5em,0px);
-moz-border-radius:6.25em;
-webkit-border-radius:6.25em;
border-radius:6.25em;
}
.bing span{
position: absolute;
transform: rotate(-30deg);
top: 1.7em;
left: 2.4em;
display: block;
color:#ffffff;
}
.inner{
position: absolute;
top: 6%;
width: 50%;
height: 50%;
background-color: #579edf;
border-radius: 50%;
left: 0;
right: 0;
bottom: 0;
margin: auto;
color:#ffffff;
text-align: center;
z-index:15;
}
.inner span{
font-size:1.5em;
width: 50%;
}
.inner span:first-child{
margin-top: 0.8em;
display: inline-block;
}
.inner span:last-child{
font-size: 0.35rem;
}
.active{
width: 52%;
height:52%;
background-color: #127ce0;
border:2px solid #328de4;
box-shadow: 0.07rem 0.05rem 0.07rem #333;
}
html5中表格如何等分,纯css3饼图五等分相关推荐
- 在html中选项卡怎么做,纯css3制作选项卡
继上一篇文章后,突发奇想利用纯粹的css3和radio的特性来打造一个选项卡切换的效果 普通的选项卡效果一般分为html+css+js来制作 步骤如下: html做布局 css做样式 js添加切换效果 ...
- html5中css新增的属性,css3有哪些新增属性？常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- web前端学习（八）——HTML5中表格、边框的相关标签设置
1.HTML中表格边框的相关标签 ①表格由 <table> 标签来定义. ②每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签 ...
- html5中表格的各种属性以及应用详细介绍
第七章 表格的应用 1 认识表格 1. 表格的构成:表单控件.提示信息.表单域 2. 创建表单:<form> </form>中的所有内容都会被提交给服务器 <for ...
- html中背景条纹效果,纯css3实现条纹背景方法（水平，垂直，倾斜）
以上这些并不是背景图,而是由CSS样式代码实现.在现代标准浏览器中,我们通过CSS3的两个属性,一个是linear-gradient,即线性渐变,另一个是background-size,用来确定渐变的 ...
- html5 div 拱桥形状制作,纯CSS3+DIV实现小三角形边框效果的示例代码
具体代码如下所示: html代码是这样的 下面用CSS3分别实现向上.下.左.右的三角形 /*箭头向上*/ .arrow-up { width:0; height:0; border-left:30p ...
- html5卷轴动画制作,使用纯CSS3构建的3D卷轴动画特效
CSS 语言: CSSSCSS 确定 .container, .fragment-cont, .fragment { transform-style: preserve-3d; -webkit-tra ...
- 纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码
本文作者html5tricks,转载请注明出处 对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...
- 18个强大的纯CSS3动画案例分享
编辑整理 | web前端开发 在之前,我也分享过很多关于CSS3,HTML5的动画案例,今天我要与你分享的这18个动画案例,也是比较炫酷的,可以实现很多交互,这些CSS3动画,可以给你的网页增添不少趣 ...
最新文章
- 终于有人把分布式事物TCC讲明白了
- Switch入门第一讲
- Redis存储总用String？你大概错过了更优的使用方法
- python中的id()函数及读取list的例子
- 微信小程序canvas绘制环形图（含动画）
- ElementUI form表单 左侧label对齐注意事项
- SAP Spartacus 和 SmartEdit 集成的一些 bug
- leetcode66. 加一
- 在线 SQL 数据库环境
- LeetCode Letter Combinations of a Phone Number
- php ruby 优缺点,php,python,ruby,perl的优缺点?
- day10 强制类型转换(更新)
- f5 系统损坏，重新安全系统
- [转]如何在Web页面上直接打开、编辑、创建Office文档
- Java NIO？看这一篇就够了！
- 关于深度优先遍历和广度优先遍历的一些深入思考
- 腾讯爬虫python_【Python爬虫+js逆向】Python爬取腾讯漫画！
- 【Numpy】改变数组形状
- 巴拉克·奥巴马总统就职演说
- java springmvc权限校验_springmvc拦截器实现用户登录权限验证