5年前端经验小伙伴教你纯css3实现饼状图
有一些网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。
资源网站大全 https://55wd.com
<div class="pie"></div>
.pie {
width: 100px;
height: 100px;
border-radius: %;
background: yellowgreen;
background-image: linear-gradient(to right, transparent %, # );
} .pie::before {
content: '';
display: block;
margin-left: %;
height: %;
border-radius: % % /%;
background-color: inherit;
transform-origin: left;
transform: rotate(.2turn);
}
实现效果如图所示:
改变rotate的角度就可以实现不同大小的饼状图效果,但是亲手试验的读者会发现,旋转50%以上并不能呈现出理想的效果,而是会呈现出如下效果:
要解决这个问题,改变伪元素的背景色就可以解决,当需要展示的区域大于一半时,改变背景色就OK。 下面笔者展示一个简单的进度指示器示例,读者亲手试验的话,会发现一个不断变化的饼状图效果。
.pie {
width: 100px;
height: 100px;
border-radius: %;
background: yellowgreen;
background-image: linear-gradient(to right, transparent %, # );
} .pie::before {
content: '';
display: block;
margin-left: %;
height: %;
border-radius: % % /%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite,bg 6s step-end infinite;
}
@keyframes spin{
to{transform: rotate(.5turn);}
}
@keyframes bg{
%{background: #;}
}
读者最好亲手试验,尝试修改其中的属性,理解其中的意思,只有理解了才能做出更有趣的东西。如果读者对svg感兴趣的话,可以尝试使用svg来实现饼状图,svg实现的效果要更加丰富多彩些。
5年前端经验小伙伴教你纯css3实现饼状图的更多相关文章
- 前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap ...
- 纯CSS3实现轮播图
前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...
- Iocomp控件教程之Pie Chart——饼状图控件
Pie Chart--饼状图控件(Pie Chart)以饼状图形式显示每一个项目内容所占的百分比比重.在设计时.能够使用属性编辑器加入或者移除项目以及更改属性值.在执行时.使用AddItem,Remo ...
- 【C#】教你纯手工用C#实现SSH协议作为GIT服务端
SSH(Secure Shell)是一种工作在应用层和传输层上的安全协议,能在非安全通道上建立安全通道.提供身份认证.密钥更新.数据校验.通道复用等功能,同时具有良好的可扩展性.本文从SSH的架构开始 ...
- 拓展-教你手把手用纯CSS写轮播图
先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...
- 举重若轻流水行云,前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_197 喜欢看电影的朋友肯定会注意到一个有趣的细节,就是电影出品方一定会在片头的Logo环节做一个小特效:暗影流动之间光泽一闪而过, ...
- 纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- 纯CSS3实现3D特效的iPhone 6动画
iPhone 6发布不久,屌丝怎能买得起,不过作为程序员,今天看到一个用纯CSS3绘制的iPhone 6,由于CSS3特性的运用,带有点3D的动画特效,大家可以先来看看在线演示效果. 在线演示 ...
随机推荐
- Java实现 洛谷 P1010 幂次方
输入输出样例 输入 #1 1315 输出 #1 2(2(2+2(0))+2)+2(2(2+2(0)))+2(2(2)+2(0))+2+2(0) import java.util.Scanner; pu ...
- 阿里云高级技术专家空见: CDN的数据化之路
想要实现优质高速的互联网视频服务,一定离不开高质量的内容分发网络服务,就是我们常说的CDN,在10月13日云栖大会视频多媒体分论坛上,阿里云高级技术专家空见为大家讲解了CDN服务过程中,数据处理.安全 ...
- 如何一步步使用国内yum源一键安装openstack-ocata版本基于centos7
写在前面的话,在网上看了一个国外的一键安装视频,我也照着做,结果出现很多错误,现在把坑解决了,照着做肯定能安装成功的 环境 virtualhost 下的centos7 配置 双网卡 一个10网段,na ...
- LR脚本信息函数-lr_get_host_name
lr_get_host_name() 返回主机的名称. char * lr_get_host_name(); lr_get_host_name函数返回执行脚本的机器的名称. 示例:lr_get_hos ...
- demo项目开发(Python+flask+mysql+redis只包含后端接口)
[demo项目开发需求] 用户信息管理,可以注册.登录.添加用户.删除用户 注册:任何用户可以注册,对用户提交的注册信息进行校验,返回对应的信息,其中: 用户名:必填,唯一 密码:必填,只能6-12位 ...
- Python的多继承问题-MRO和C3算法
大部分内容转载自C3 线性化算法与 MRO 理解Python中的多继承 Python 中的方法解析顺序(Method Resolution Order, MRO)定义了多继承存在时 Python 解释 ...
- mongoDB的基本使用方法
MongoDB 安装(乌班图系统) apt install mongodb mongoDB与sql的对比 SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数 ...
- 这篇文章,我们来谈一谈Spring中的属性注入
本系列文章: 读源码,我们可以从第一行读起 你知道Spring是怎么解析配置类的吗? 配置类为什么要添加@Configuration注解? 谈谈Spring中的对象跟Bean,你知道Spring怎么创 ...
- Java 根据地图定位坐标推荐附近的目标地址(直线距离)
这两天需要在公众号上面做一个关于根据地图当前定位与目标地址直线距离远近推荐的查询,一开始摸不着头脑,现已解决,mark一下 现有的材料:当前用户手机端的通过微信定位的经纬度坐标.数据表中保存有场地的定 ...
- jni不通过线程c回调java的函数
整个工程的项目如下: 1.项目的思路是在activity中启动MyService这个服务,在服务中调用 JniScsManger类中的本地方法startNativeScsService,在 start ...