html扇形调节角度,CSS如何实现任意角度的扇形(代码示例)
本篇文章给大家带来的内容是关于CSS如何实现任意角度的扇形(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果
扇形绘制
.shanxing{ position: relative; width: 200px; height: 200px; border-radius: 100px; background-color: yellow;
}
.sx1{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆,在clip的rect范围内的内容显示出来,使用clip属性,元素必须是absolute的 */ border-radius: 100px; background-color: #f00;
/*-webkit-animation: an1 2s infinite linear; */
}
.sx2{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); border-radius: 100px; background-color: #f00;
/*-webkit-animation: an2 2s infinite linear;*/
}
/*绘制一个60度扇形*/ .shanxing1 .sx1{transform: rotate(-30deg);} .shanxing1 .sx2{transform: rotate(-150deg);}
/*绘制一个85度扇形*/ .shanxing2 .sx1{transform: rotate(-45deg);} .shanxing2 .sx2{transform: rotate(-140deg);}
/*绘制一个向右扇形,90度扇形*/ .shanxing3 .sx1{transform: rotate(45deg);} .shanxing3 .sx2{transform: rotate(-45deg);}
/*绘制一个颜色扇形 */ .shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;} .shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}
/*绘制一个不同颜色半圆夹角 */ .shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;} .shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;}
/绘制一个60度扇形/
/*绘制一个85度扇形*/
/*绘制一个向右扇形,90度扇形*/
/*绘制一个颜色扇形 */
/*绘制一个不同颜色半圆夹角 */
下面这个是结合css+html5+javascript的一个更复杂的圆环图形
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
circle
}
not suopport canvas
var text=document.getElementById("nihao");
text.innerHTML="woshiwuxinguo"; var i=0.9;//这里默认设置好评率为90%
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle="gray";
ctx.arc(100,75,50,0,2*Math.PI);
ctx.fillStyle="#FBFBFB";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.translate(100,75);
ctx.rotate(-90*Math.PI/180);
ctx.strokeStyle="#FFCFCF";
ctx.arc(0,0,50,0,2*Math.PI*i);
ctx.stroke();
c.addEventListener("mouseover", function(e) {
ctx.beginPath();
ctx.strokeStyle="gray";
ctx.arc(0,0,50,0,2*Math.PI);
ctx.stroke(); var finish=i; var step=0; var internal=setInterval(function(e) {
console.log("step:"+step); if(step
step=step+0.01;
ctx.beginPath();
ctx.strokeStyle="#FFCFCF";
ctx.arc(0,0,50,0,2*Math.PI*step);
ctx.stroke();
}else{
clearInterval(internal);
}
}, 0.5)
}, true)
html扇形调节角度,CSS如何实现任意角度的扇形(代码示例)相关推荐
- php控制文本换行,css如何控制文字换行方式?(代码示例)
css如何控制文字换行方式?本篇文章就给大家介绍css设置文字(特别是连续的数字和英文)强制换行.强制不换行且隐藏超出部分的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 一. ...
- 用html实现模糊效果,css实现简单背景模糊的方法(代码示例)
本篇文章给大家带来的内容是介绍css实现简单背景模糊的方法(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 使用filter属性来设置模糊值 效果: css样式: .co ...
- html 点击加号展开代码,纯css实现加号一个的效果(代码示例)
本篇文章给大家带来的内容是关于纯css实现加号一个的效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现下图的加号效果: 若想实现这个效果, 只需一个p元素即可搞定. ...
- html 物流状态,css+html如何实现物流进度样式(代码示例)
本篇文章给大家带来的内容是介绍css+html如何实现物流进度样式(代码示例),有需要的朋友可以参考一下,希望对你们有所帮助. 效果: css样式: ul li { list-style: none; ...
- [css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法 先画一个圆,外加两个绝对定位的半圆 扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现 这只能切出180°以内的扇形 超过180°的 ...
- canvas画任意角度的扇形,弧形,及扇形弧形填纯色渐变色
前提: 接到一个需求,某个事项的完成率用环形表示,小于100%时,每隔25%为一种纯色填充,完成率100%的时候,整个环形为渐变色填充.开始是用的echarts,知道canvas是画图工具,但是之前没 ...
- CSS 实现任意角度圆环
参考链接: css 制作圆环 - 掘金 主要思路: 利用 CSS 的 clip-path 属性进行裁剪 clip-path 具体信息参考 polygon() - MDN (mozilla.org) 该 ...
- 使用html编写SVG圆图形,CSS vs. SVG:任意图形UI组件
在这个系列教程的前两篇文章中,我们比较了CSS和SVG创建图形文本.复选框和单选按钮的技术与效果.在这篇文章中将介绍CSS和SVG对比技术中的另一个技术--创建图形UI组件的技术. 具体地说,我们将要 ...
- C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字
这篇文章是 GDI+ 总结系列的第三篇,如果对 GDI+ 的基础使用不熟悉的朋友可以先看第一篇文章<C# 使用 GDI+ 画图>. 需求 需求是要实现给图片添加任意角度旋转的文字,文字的旋 ...
最新文章
- 2G---5G与未来天线技术
- shell mysql e_xshell怎么搭建mysql
- 制作npm插件vue-toast-m实例练习
- 【中文】Joomla1.7扩展介绍之JoomSEF Free (搜索引擎友好)
- Expdp/Impdp 并行导入导出详细测试
- SAP Spartacus baseSite 出现在 OCC 请求 url 中
- SAP云平台CloudFoundry编程环境下app router的使用最佳实践
- resnet50网络结构_AAAI2020 | 利用网络结构关系加速NAS+Layer
- thinkphp跨库操作代码实例
- bgb邻居关系建立模型_今日 Paper | 新闻推荐系统;多路编码;知识增强型预训练模型等...
- 魅族16T刚发布就被锤!德国莱茵TÜV:它没通过我的认证
- tde数据库加密_如何将TDE加密的用户数据库添加到Always On可用性组
- windows下创建目录函数_mkdir
- Python os.system()调用.sh脚本
- Windows2000系统下Apache2和PHP4安装终级宝典
- Html鼠标右键菜单代码
- 创建win10介质进度为0_win10介质创建工具(media creation tool)下载_win10介质创建工具(media creation tool)官方下载-太平洋下载中心...
- 一文彻底搞懂加密、数字签名和数字证书,看不懂你打我!
- Hungry for your love 真爱无限
- 利用IDM下载QQ群文件
热门文章
- 人生中一定要坚守的格言
- [Android] Bitmap OOM解决办法一
- Java 排序(转)
- 利用接口做参数,写个计算器,能完成加减乘除运算。 (1)定义一个接口Compute含有一个方法int computer(int n, int m)。 (2)设计四个类分
- mysql 重命名索引_mysql增删改字段,重命名替换字段
- Sigma Function(LightOJ-1336)
- 棋盘游戏(HDU-1281)
- 素数对(信息学奥赛一本通-T1403)
- 奇偶数判断(信息学奥赛一本通-T1041)
- 1 FI配置-企业结构-定义-创建集团公司(Company)