css绘制扇形进度条

前言：

本文为大家分享了利用纯css绘制圆环进度条的方法，在使用本文中的方法时，建议先了解圆心角、弧度制、三角函数等知识。

为实现如下效果呕心沥血：

数学欠佳的同学请自行科普...

对于 $count 为 1 或 2 的情况需特殊处理，因为 tan(PI) 及 tan(PI / 2) 为无穷值，不了解的同学请研究正切函数图像：

最后，复制并逐一旋转扇形单元：@for $index from 0 to $count {

span:nth-child(#{$index + 1}) {

$transform: translate(-50%, 0) rotate(360deg / $count / 2 + 360deg * $index / $count);

$origin: if($count == 2, bottom, center);

-webkit-transform: $transform;

transform: $transform;

-webkit-transform-origin: $origin;

transform-origin: $origin;

}

}

果酱制作完毕，其它点缀请自行添加喽...本例完整代码在此。

2017/11/14 续更

由于本例引入了三角函数等数学运算，使用 Sass 预编译。未安装 Sass 的同学可下载经编译的 源码 开启 sector.html 查看效果。

安装 Sass 请参考 sunmengyuan.github.io/garden/2017… 文章末尾的安装教程。

本例调试方法：cd sector

sass --watch style.scss:style.css --debug-info

作者：呆恋小喵

我的后花园：sunmengyuan.github.io/garden/

我的 github：github.com/sunmengyuan

原文链接：sunmengyuan.github.io/garden/2017…

相关推荐：css教程

css绘制扇形进度条的教程已介绍完毕，更多请关注跳墙网其他文章教程！

css绘制扇形进度条 相关文章

css nav 是什么意思

css nav是导航标签的意思，该标签定义导航链接的部分；在css中可以直接定义该样式为nav；但并不是所有的HTML文档都要使用到nav元素，nav元素只是作为标注一个导航链接的区域。 本文操作环境：windows7系统、HTML5CSS3版，DELL G3电脑。 css中nav是什么意思？

用css怎么添加小图标

用css添加小图标的方法：首先使用input标签创建一个文本框；然后在css中使用background属性设置input的背景图片为“icon.jpg”；最后完成小图标的添加即可。 本文操作环境：windows7系统、HTML5CSS3、DELL G3电脑。 新建一个html文件，命名为test.html，用于

怎么样才能玩转前端所有的CSS背景相关问题

CSS 背景 CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-position 1.背景颜色 background-color 属性定义了元素的背景颜色. 页面的背景颜色使用在bod

css定位

1.定位可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。 2.定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置，并且可以压住其他盒子。 3.定位的组成：将盒子定在某一个位置 ‘ 1.定位模式(position)：用于知道一个元

用c++的opencv实现以前的python的turtle曲线绘制

opencv库的安装配置的教程网上很多了，这个可以作为图像处理及2D图形的绘制库，一个cv::Mat就是一个像素矩阵，cv将图像认为是一个二维矩阵 这个图像的原点在左上角，x轴水平向右，y轴水平向下，所以我们画线的坐标要localPointToCVPoint转，setWorldOrigin这

CSS中如何使用@规则用法介绍

【推荐教程：CSS视频教程 】 at-rule 是一个声明，为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字，这个关键字充当一个标识符，用于表示CSS该做什么。这是一个通用的语法，尽管每个at-rule有其它语法变体。 常规规则 常规规则遵循

CSS个人笔记

CSS主要是设计html页面的文本内容(字体、大

css笔记

/*css基础*/HBuilder快捷键,li*3 按tab快速生成divulli*5 按tab快速生成div+div 按tab生成连个divulli{我要自卸王$}*5 按tap键#ee 颜色重要:重置html默认样式很重要,有些好的reset.css,直接引入即可css中以-moz,-ms,-webkit,-o开头的样式的含义-moz代表baifi

CSS 实现logo图像链接替换文本链接

div id="logo"a href="http://neirong.org" title="资源共享"img src="data:images/logo.gif"/a/div 现在的网页设计一般用logo图片代码纯文本链接，而大部分网页设计师是直接在网页相关位置使用(lt;img src=”images/logo.gif”gt;)实现的，其实更好的方法是直接

vue移动端rem适配解决方案: postcss-pxtorem+amfe-flexible(转载)

移动端vue配置rem适配--postcss-pxtorem、amfe-flexible移动端vue配置 REM 适配Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具： postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remamfe-flexible 用于设置 rem 基准