html怎么简单做圆形进度条,css3如何实现圆形进度条?css3中圆形进度条的实现
进度条我们是经常可以看见的,但是进度条怎么来实现呢?我们上一篇文章(css3如何实现进度条?css3中进度条的实现方法介绍)中已经简单的说过了css3实现长形进度条的方法,今天的这篇文章就给大家来介绍一下css3圆形进度条的实现方法,有感兴趣的小伙伴可以看一看。
我们都知道做出一个静态的圆环形是很简单的,像下面这样就可以了
.circle{
width: 160px;
height: 160px;
border:20px solid orange;
border-radius: 50%;
}
css3圆形效果如下:
但是圆形的进度条是一个动态的效果,所以就需要考虑很多了,首先我们来看一下css圆形进度条的实现思路:
我们可以把整个圆环分成左右两部分;左右两个半圆都旋转,比如先让右边半圆旋转再接上左边半圆然后左边半圆旋转,这样就可以实现了整个圆环的旋转,就是一个圆形进度条了。
下面我们就来看看css3圆形进度条具体的实现方法。
首先我们来看css3右边半圆的实现
position: relative;
width: 100px;
height: 200px;
overflow: hidden;
}
.rightcircle{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
right: 0;
border-top:20px solid lightblue;
border-right:20px solid lightblue;
-webkit-transform : rotate(45deg);
-moz-transform : rotate(45deg);
-o-transform : rotate(45deg);
transform : rotate(45deg); /* 旋转45度 */
}
/* 这里仅考虑webkit内核的情况,您可以写完整了 */
.rightcircle{
-webkit-animation-name: circle_right; /* 动画名称 */
-webkit-animation-duration: 5s; /* 完成一个动画需要的时间 */
-webkit-animation-timing-function: linear; /* 动画播放的方式,linear是匀速变化 */
-webkit-animation-iteration-count: infinite; /* 动画播放的次数,infinite是无限次数 */
}
@-webkit-keyframes circle_right{
0%{
transform : rotate(-135deg);
}
100%{
transform : rotate(45deg);
}
}
css3右边半圆的实现效果如下:
css3左半圆实现和右半圆正好相反,代码如下:.right{
position: relative;
width: 100px;
height: 200px;
overflow: hidden;
}
.rightcircle{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
bottom:0;
left: 0;
border-bottom:20px solid lightblue;
border-left:20px solid lightblue;
-webkit-transform : rotate(45deg);
-moz-transform : rotate(45deg);
-o-transform : rotate(45deg);
transform : rotate(45deg); /* 旋转45度 */
}
/* 这里仅考虑webkit内核的情况,您可以写完整了 */
.rightcircle{
-webkit-animation-name: circle_right; /* 动画名称 */
-webkit-animation-duration: 5s; /* 完成一个动画需要的时间 */
-webkit-animation-timing-function: linear; /* 动画播放的方式,linear是匀速变化 */
-webkit-animation-iteration-count: infinite; /* 动画播放的次数,infinite是无限次数 */
}
@-webkit-keyframes circle_right{
0%{
transform : rotate(-135deg);
}
100%{
transform : rotate(45deg);
}
}
css3左半圆效果如下:
两个半圆都实现出来了,接下来只需要将两个半圆拼接在一起就可以实现css3圆形进度条的效果了
css3实现圆形进度条代码如下:
position: relative;
width: 199px;
height : 200px;
}
.circle_process .wrapper{
width: 100px;
height: 200px;
position: absolute;
top:0;
overflow: hidden;
}
.circle_process .right{
right:0;
}
.circle_process .left{
left:0;
}
.circle_process .circle{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
transform : rotate(-135deg);
}
.circle_process .rightcircle{
border-top:20px solid lightblue;
border-right:20px solid lightblue;
right:0;
-webkit-animation: circle_right 5s linear infinite;
}
.circle_process .leftcircle{
border-bottom:20px solid lightblue;
border-left:20px solid lightblue;
left:0;
-webkit-animation: circle_left 5s linear infinite;
}
@-webkit-keyframes circle_right{
0%{
-webkit-transform: rotate(-135deg);
}
50%,100%{
-webkit-transform: rotate(45deg);
}
}
@-webkit-keyframes circle_left{
0%,50%{
-webkit-transform: rotate(-135deg);
}
100%{
-webkit-transform: rotate(45deg);
}
}
css3中圆形进度条效果如下:
本篇文章到这里就全部结束了,更多精彩内容大家可以关注php中文网!!!
html怎么简单做圆形进度条,css3如何实现圆形进度条?css3中圆形进度条的实现相关推荐
- android加法服务类,iOS越来越像Android:苹果简单做加法远离精致
原标题:iOS越来越像Android:苹果简单做加法远离精致 刚刚结束的WWDC2016的主题演讲中,苹果为我们带来了最新的iOS 10系统,官方称本次iOS 10的推出有着多大10项的重要更新,在用 ...
- oracle分组查询取第一条数据,160804、oracle查询:取出每组中的第一条记录
oracle查询:取出每组中的第一条记录 按type字段分组,code排序,取出每组中的第一条记录 方法一: select type,min(code) from group_info group b ...
- android 渐变圆形进度条_flutter好用的轮子推荐七-flutter圆形或线型进度条
前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!F ...
- 小猿圈自学web前端之CSS3动画练习案例:用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
- android 图片处理过程中添加进度条,『Android自定义View实战』给我一个图标,还你一个水波纹进度球...
前言 我们都知道,平时表现进度的方式有千千万万种(没有UI想不到的,只有你做不到的= =.),其中有一种就是水波纹进度球的形式,网上很多种实现都是直接采用纯色填充的方式,即水波纹都是纯颜色填充,效果看 ...
- 如何在UIAlertView中显示进度条
今天这个问题是,在一个iPhone程序中,我要在后台做大量的数据处理,希望在界面上显示一个进度条(Progress Bar)使得用户了解处理进度.这个进度条应该是在一个模态的窗口中,使界面上其他控件无 ...
- python文本进度条94页_Python学习笔记 | 实例4:文本进度条
本文为中国大学MOOC<Python语言程序设计>课程学习笔记,课程主讲:嵩天老师,练习平台:Python123,参考教材:<Python语言程序设计基础> 文本进度条-简单的 ...
- html video显示进度条_使用 tqdm 在 Python 应用中显示进度 | Linux 中国
如果你的程序需要一段时间才能显示结果,可通过显示它的进度来避免让用户感到沮丧. 来源:https://linux.cn/article-12990-1.html 作者:Moshe Zadka 译者:g ...
- mysql相同姓名只显示第一条_SQL中遇到多条相同内容只取一条的最简单实现方法...
SQL中经常遇到如下情况,在一张表中有两条记录基本完全一样,某个或某几个字段有些许差别, 这时候可能需要我们踢出这些有差别的数据,即两条或多条记录中只保留一项. 如下:表timeand 针对time字 ...
- 【Python】IDLE中文本进度条的单行动态刷新无法实现分析
文本进度条需求分析 采用字符串方式打印可以动态变化的文本进度条 进度条需要能在一行中逐渐变化 如何获得文本进度条的变化时间呢?我们采用sleep()模拟一个持续的进度 import time scal ...
最新文章
- python c#_【分享】C# 调用 Python 脚本, 与 Python 调用 C# 类库
- Bootstrap的x-editable行编辑
- 安卓自动化测试——rf
- 【工业控制】How to Optimize a Waveform
- 基于百度理解与交互技术实现机器问答
- 鸿蒙系统发布IT直播,华为开源平台上线:鸿蒙系统、方舟编译器在列
- Software Construction Series(1)
- 倾斜模型精细化处理_基于倾斜摄影和近景摄影技术的实景三维模型结合(CC与 DPModeler结合)...
- 科大讯飞携手华南理工,成立脑机接口公司,注册资本4000万
- QA:Golang抽象nil问题
- Visio 2013打开自动关闭,闪退的解决办法
- 注册测绘师复习方法,注册测绘师考试心得
- 在xilinx SDK中查询API函数的方法
- 详细的组态王软件与200 Smart PLC网口通信教程
- 2022年天猫618超级红包玩法入口
- jwt token注销_JWT 管理用户登录时,都需要把 token 存数据库里,判断用户登出时删除吗?...
- 计算机英语面试翻译,计算机面试英文自我介绍范例
- 数学笔记——导数1(导数的基本概念)
- 用天文方法计算二十四节气
- ExifTool文件鉴定器