本文摘自PHP中文网,作者V,侵删。
前言:
在工作中,有时我们会有饼状图的需求,如统计图表、进度指示器、定时器等,当然,实现方式也有很多,甚至有现成的js库可以拿来直接使用。兴趣使然,自己动手利用纯css实现饼状图,看看效果如何。
(视频教程推荐:css视频教程)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .pie {
width : 100px ;
height : 100px ;
border-radius: 50% ;
background : yellowgreen;
background-image : linear-gradient(to right , transparent 50% , #655 0 );
}
.pie::before {
content : '' ;
display : block ;
margin-left : 50% ;
height : 100% ;
border-radius: 0 100% 100% 0 / 50% ;
background-color : inherit;
transform-origin: left ;
transform: rotate(. 2 turn);
}
|
效果:
改变rotate的角度就可以实现不同大小的饼状图效果,但是亲手试验的读者会发现,旋转50%以上并不能呈现出理想的效果,而是会呈现出如下效果:
要解决这个问题,改变伪元素的背景色就可以解决,当需要展示的区域大于一半时,改变背景色就OK。
下面笔者展示一个简单的进度指示器示例,读者亲手试验的话,会发现一个不断变化的饼状图效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .pie {
width : 100px ;
height : 100px ;
border-radius: 50% ;
background : yellowgreen;
background-image : linear-gradient(to right , transparent 50% , #655 0 );
}
.pie::before {
content : '' ;
display : block ;
margin-left : 50% ;
height : 100% ;
border-radius: 0 100% 100% 0 / 50% ;
background-color : inherit;
transform-origin: left ;
animation: spin 3 s linear infinite,bg 6 s step-end infinite;
}
@keyframes spin{
to{transform: rotate(. 5 turn);}
}
@keyframes bg{
50% { background : #655 ;}
}
|
效果如下:
读者最好亲手试验,尝试修改其中的属性,理解其中的意思,只有理解了才能做出更有趣的东西。如果读者对svg感兴趣的话,可以尝试使用svg来实现饼状图,svg实现的效果要更加丰富多彩些。
推荐教程:CSS教程
以上就是css如何制作饼状图的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css给文字添加描边的方法是什么
文字居中的css代码是什么
css vw是什么单位
css怎么删除滚动条
如何合理使用css框架?
css的盒模型有哪些
css里大于号表示什么
css如何剪切元素??clip属性的使用
css不显示图标怎么办
css怎么把东西往右移
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何制作饼状图