关键词:
今天就重点讲解这个效果,首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了:
.circleprogress{
width: 160px;
height: 160px;
border:20px solid red;
border-radius: 50%;
}
然后就会说,这很简单嘛。但是如果不是完整圆形的呢?想了想:
.circleprogress{
width: 160px;
height: 160px;
border:20px solid red;
border-left:20px solid transparent;
border-bottom:20px solid transparent;
border-radius: 50%;
}
然后还是会说,这个也不难啦。可是,如果不是刚好都是45度的倍数呢?
OK,我们先设置一个200x200的方块,然后我们在这里面完成我们的效果:
.circleProgress_wrapper{
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
border:1px solid #ddd;
}
接下来我将在这个容器里再放两个矩形,每个矩形都占一半:
<div class="circleProgress_wrapper">
<div class="wrapper right">
<div class="circleProgress rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circleProgress leftcircle"></div>
</div>
</div>
.wrapper{
width: 100px;
height: 200px;
position: absolute;
top:0;
overflow: hidden;
}
.right{
right:0;
}
.left{
left:0;
}
这里重点说一下.wrapper 的overflow:hidden; 起着关键性作用。这两个矩形都设置了溢出隐藏,那么当我们去旋转矩形里面的圆形的时候,溢出部分就被隐藏掉了,这样我们就可以达到我们想要的效果。
从html结构也已看到,在左右矩形里面还会各自有一个圆形,先讲一下右半圆:
.circleProgress{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
}
.rightcircle{
border-top:20px solid green;
border-right:20px solid green;
right:0;
}
可以看到,效果已经出来了,其实本来是一个半圆弧,但由于我们设置了上边框和右边框,所以上边框有一半溢出而被隐藏了,所以我们可以通过旋转得以还原:
.circleProgress{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
}
所以只要旋转自己想要的角度就可以实现任意比例的进度条。接下来把左半圆弧也实现,变成一个全圆:
.leftcircle{
border-bottom:20px solid green;
border-left:20px solid green;
left:0;
}
紧接着,就是让它动起来,原理是这样的,先让右半圆弧旋转180度,再让左半圆弧旋转180度,这样,两个半圆弧由于先后都全部溢出而消失了,所以看起来就是进度条再滚动的效果:
.rightcircle{
border-top:20px solid green;
border-right:20px solid green;
right:0;
-webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
border-bottom:20px solid green;
border-left:20px solid green;
left:0;
-webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
0%{
-webkit-transform: rotate(45deg);
}
50%,100%{
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%,50%{
-webkit-transform: rotate(45deg);
}
100%{
-webkit-transform: rotate(225deg);
}
}
当然,我们只需要调整一下角度就可以实现反向的效果:
.circleProgress{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(-135deg);
}
@-webkit-keyframes circleProgressLoad_right{
0%{
-webkit-transform: rotate(-135deg);
}
50%,100%{
-webkit-transform: rotate(45deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%,50%{
-webkit-transform: rotate(-135deg);
}
100%{
-webkit-transform: rotate(45deg);
}
}
好的,接下来就是奔向最终效果了,正如我们一开始看到的那样,有点像我们使用360卫士清理垃圾时的类似效果,当然不是很像啦:
.circleProgress_wrapper{
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
border:1px solid #ddd;
}
.wrapper{
width: 100px;
height: 200px;
position: absolute;
top:0;
overflow: hidden;
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 160px;
height: 160px;
border:20px solid rgb(232, 232, 12);
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
}
.rightcircle{
border-top:20px solid green;
border-right:20px solid green;
right:0;
-webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
border-bottom:20px solid green;
border-left:20px solid green;
left:0;
-webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
0%{
border-top:20px solid #ED1A1A;
border-right:20px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-top:20px solid rgb(232, 232, 12);
border-right:20px solid rgb(232, 232, 12);
border-left:20px solid rgb(81, 197, 81);
border-bottom:20px solid rgb(81, 197, 81);
-webkit-transform: rotate(225deg);
}
100%{
border-left:20px solid green;
border-bottom:20px solid green;
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%{
border-bottom:20px solid #ED1A1A;
border-left:20px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-bottom:20px solid rgb(232, 232, 12);
border-left:20px solid rgb(232, 232, 12);
border-top:20px solid rgb(81, 197, 81);
border-right:20px solid rgb(81, 197, 81);
-webkit-transform: rotate(45deg);
}
100%{
border-top:20px solid green;
border-right:20px solid green;
border-bottom:20px solid green;
border-left:20px solid green;
-webkit-transform: rotate(225deg);
}
}
可以看到,其实就是多了一些改变不同边框颜色的动画而已,这个就给大家自己去实践吧!主要还是利用两个矩形来完成这么一个圆形进度条效果,特别注意overflow这条规则,起着关键作用。
图解css3制作圆环形进度条的实例教程
...圆环形进度条的实例教程首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了:.circleprogress{ width: 16 查看详情
纯css3制作圆形进度条所遇到的问题
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高相等的子盒子,... 查看详情
异步下载圆形进度条显示进度
圆形进度条参考链接即可:使用css3实现圆形进度条需求点击下载后遮罩层显示下载进度:1.圆形进度条参考以上链接,有点小瑕疵,可更改定位距离实现重合。 2.遮罩层:.lbOverlay{ display:none; position:fixed; left:0; ... 查看详情
ios制作个圆形进度条
参考技术A1.需要做个这样的圆形进度条 自定义弹窗view就不说了,主要是这个圆形进度view,底色是灰色然后有进度灰色被黑色覆盖或者说变成黑色首先我们自定一个view,加个uilabel做进度lbael@property(nonatomic,strong)UILabel*percentLabel;/... 查看详情
怎样用div实现带百分百环形进度条
html5+javascript实现的圆形进度条,应该符合你要求源代码:http://blog.csdn.net/tangdou5682/article/details/52778766参考技术A1、html5直接就可用css3的属性去做圆形,border-radius即可实现圆角。2、图片形式,左右两侧做圆角图片,衔接好,即可... 查看详情
圆形百分比进度条
】圆形百分比进度条【英文标题】:Circularpercentprogressbar【发布时间】:2015-06-0317:19:38【问题描述】:我想在我的网站上有一个百分比圆圈指示器:在这种情况下,它显示75%。这应该怎么做?我在图像文件中有黄色圆圈,但如果... 查看详情
h5canvas圆形进度条上上有圆点,进度70%圆点就在70%上(随着进度到哪就在哪),怎么做。
类似效果,这里有原理和源代码http://blog.csdn.net/tangdou5682/article/details/52778766参考技术Abymember`varchar(12)defaultNULL,`sex`varchar(2)defaultNULL,`count`int(4)defaultNULL)ENGINE=MyISAMDEFAULTCHARSET=gb2312;/*Dataforthetable`m_count_by`*/ 查看详情
学习|css3实现进度条加载
进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验。进度条的的实现分为3大部分:1、页面布局,2、进度条动效,3、何时进度条增加。文件目录加载文件顺序<linkrel="stylesheet/less"href="./index.less"><script... 查看详情
圆形进度条 Android
】圆形进度条Android【英文标题】:CircularProgressBarAndroid【发布时间】:2015-06-0320:06:35【问题描述】:我想创建一个分段的圆形进度条,其行为类似于倒数计时器,这样每个分段都有自己的时间限制。有一个iOS应用pTimer+,我想在An... 查看详情
带有图像和圆形进度条的圆形按钮
】带有图像和圆形进度条的圆形按钮【英文标题】:Circularbuttonwithimageandcircularprogressbar【发布时间】:2019-12-2819:29:53【问题描述】:我正在尝试制作一个按钮,里面有一个图像,外面有一个圆形进度条,按下按钮后是彩色的。我... 查看详情
带圆角的 Android 圆形进度条
】带圆角的Android圆形进度条【英文标题】:Androidcircularprogressbarwithroundedcorners【发布时间】:2016-08-0623:37:54【问题描述】:我正在尝试获得一个带有圆角的圆形进度条,如下所示。但到目前为止,我无法获得圆角,我能够获得圆... 查看详情
googlechrome圆形进度条
Conmajia?2012UpdatedonFeb.21,2018GoogleChrome的圆形进度条。Demo功能显示百分比(0-100)。如果进度值达到100%,则将闪烁指定次数。属性BlinkCount,结束后闪烁几次。0为不闪烁,默认2.BlinkSpeed,闪烁速度,0-255,默认10.Image,中央图标SpokeCol... 查看详情
如何在 QT 中获得具有圆形边缘和圆形进度边缘的 QProgressBar?
】如何在QT中获得具有圆形边缘和圆形进度边缘的QProgressBar?【英文标题】:HowtogetaQProgressBarinQTwithroundededgesandroundedprogressedges?【发布时间】:2016-03-1723:20:32【问题描述】:我创建了一个垂直进度条,并尝试使用圆角设置它的样... 查看详情
qt第三方圆形进度条-及其改进
Qt第三方圆形进度条的改进要实现一个圆形的进度条功能,在网上找到一个比较出名的第三方封装类:QRoundProgressBar,地址:sourceforge的QRoundProgressBar 功能封装的还是不错,提供了3种模式,线形、圆环、饼状。使用过程中发现... 查看详情
Visual Basic 圆形进度条
】VisualBasic圆形进度条【英文标题】:Visualbasiccircularprogressbar【发布时间】:2015-01-1118:11:15【问题描述】:我正在尝试制作一个具有良好UI的软件,但我在VB方面并不专业......如何制作圆形进度条?举例【问题讨论】:见codeproject.... 查看详情
快速创建围绕图像的圆形进度条
】快速创建围绕图像的圆形进度条【英文标题】:Creatingacircularprogressbararoundanimageinswift【发布时间】:2016-07-2712:05:09【问题描述】:我正在尝试在图像周围创建一个圆形进度条,如下面的屏幕截图所示。到目前为止,我已经设法... 查看详情
如何更改圆形进度条的颜色?
】如何更改圆形进度条的颜色?【英文标题】:Howtochangecolorincircularprogressbar?【发布时间】:2011-07-1707:03:54【问题描述】:我在Android上使用循环进度条。我想改变它的颜色。我正在使用"?android:attr/progressBarStyleLargeInverse"风格。那... 查看详情