利用CSS3实现进度条的两种姿势详解


Posted in HTML / CSS onMarch 21, 2017

效果图如下:

利用CSS3实现进度条的两种姿势详解
 

利用CSS3实现进度条的两种姿势详解
 

第一种姿势如下
 

先上代码

<div id="progress">
      <span></span>
</div>
/*对应CSS*/
    #progress{
           width: 300px;
           height: 30px;
           border:1px solid #ccc;
           border-radius: 15px;
           overflow: hidden;  /*注意这里*/
           box-shadow: 0 0 5px 0px #ddd inset;
    }          
    #progress span {
           display: inline-block;
           width: 70%;
           height: 100%;       
           background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%);    
           background-size: 60px 30px;
           text-align: center;
           color:#fff;
           animation:load 3s ease-in;
     }
     @keyframes load{
           0%{
               width: 0%;
           }
           100%{
               width:70%;
           }
       }

上方的渐变色使用了css3中的 linear-gradient
 

linear-gradient语法

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
  • angle:用角度值指定渐变的方向(或角度)。
  • to left:设置渐变为从右到左。相当于: 270deg
  • to right:设置渐变从左到右。相当于: 90deg
  • to top:设置渐变从下到上。相当于: 0deg
  • to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。
  • color-stop: 用于指定渐变的起止颜色:
  • color:指定颜色。
  • length:用长度值指定起止色位置。不允许负值
  • percentage:用百分比指定起止色位置。
     

栗子:

.test1{
    background: linear-gradient(#EA2000, #E5A399);
}
.test2 {
    background: linear-gradient(45deg,#EA2000 20%,#E5632D 50%, #E5B12D 80%);
}
.test3 {
    background: linear-gradient(to top right, #000, #416796 50%, #B5CAE4);
}
.test4{
    background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%);   
}

效果图:
 

利用CSS3实现进度条的两种姿势详解
 

动画通过keyframes来实现,通过改变span的宽度来实现进度的效果,素不素hin简单?!
 

现在的进度条效果是只有70%的效果,只要改变width的值就可以啦,就像下图,一致改成某个值即可。
 

利用CSS3实现进度条的两种姿势详解
 

第二种姿势
 

首先,构造好一个正方形的div,将这个正方形对称分成左右两块,如下
 

这里构造的是一个200px 200px的一个正方形,分成两块100px200px的矩形。

<div class="progress2">
        <div class="rect right">
        </div>                               
        <div class="rect left">
        </div>
 </div>
.progress2{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        position: relative;
        border:1px solid #ddd;
    }
   
    .rect{
        width: 100px;
        height: 200px;
        position: absolute;
        top:0;
        overflow: hidden; /*注意这里*/
    }
    .right{
        right:0;
    }
    .left{
        left:0;
    }

如下效果
 

利用CSS3实现进度条的两种姿势详解

接下来,在每一块矩形中再构造一个空心圆,先构造右半边,如下

<div class="progress2">
        <div class="rect right">
            <div class="circle rightcircle"></div>
        </div>                               
        <div class="rect left">
            
        </div>
 </div>
.circle{
        width: 160px;
        height: 160px;
        border:20px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top:0;
    }
    .rightcircle{
        border-top:20px solid rgb(41,137,216);
        border-right:20px solid rgb(41,137,216);
        right:0;
    }

会看到下面的效果
 

利用CSS3实现进度条的两种姿势详解
 

由于在class:rect中,将overflow设置成了hidden,使得溢出的部分被遮盖了,之后的效果实现与这个属性关系也紧密相连。
 

如果没有设置该属性,效果就是这样的。
 

利用CSS3实现进度条的两种姿势详解
 

那会发现有一部分被盖住了,我们在使他旋转45度即可

.circle{
        width: 160px;
        height: 160px;
        border:20px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top:0;
        transform: rotate(45deg); /*注意这里*/
    }

效果如下
 

利用CSS3实现进度条的两种姿势详解
 

我们实现动画效果的方式就是让右半边旋转180度,然后左半边旋转180度,凑成完整的效果。
 

先给这右半边设置动画效果,即一开始让其旋转45度,然后旋转180度,由于这只是右半边,所以在50%的时候就应该旋转完毕,之后一直保持不变。

.rightcircle{
        border-top:20px solid rgb(41,137,216);
        border-right:20px solid rgb(41,137,216);
        right:0;
        animation: load_right 5s linear infinite;
    }
    @keyframes load_right{
        0%{

            transform: rotate(45deg);
        }
        50%{

            transform: rotate(225deg);
        }
        100%{

            transform: rotate(225deg);
        }
    }

这是没有在class rect中设置overflow:hidden的效果
 

利用CSS3实现进度条的两种姿势详解
 

这是在class rect中设置了overflow:hidden的效果
 

利用CSS3实现进度条的两种姿势详解
 

现在,我们就可以把左半边也凑上了,同理,动画效果一开始先旋转45度,调正,然后一直保持不变,到50%之后,再开始旋转180度。这样就与右半边衔接上了。

<div class="progress2">
        <div class="rect right">
            <div class="circle rightcircle"></div>
        </div>                               
        <div class="rect left">
            <div class="circle leftcircle"></div>
        </div>
 </div>
.leftcircle{
        border-bottom:20px solid rgb(41,137,216);
        border-left:20px solid rgb(41,137,216);
        left:0;
        animation: load_left 5s linear infinite;
    }
    @keyframes load_left{
        0%{

            transform: rotate(45deg);
        }
        50%{

            transform: rotate(45deg);
        }
        100%{
            transform: rotate(225deg);
        }
    }

这是整体的效果
 

利用CSS3实现进度条的两种姿势详解
 

可以调整角度或者调整颜色即可实现反向的效果。
 

我是调整了颜色就可以得到最开始的动画效果啦,下面是完整的代码

<div class="progress2">
        <div class="rect right">
            <div class="circle rightcircle"></div>
        </div>                               
        <div class="rect left">
            <div class="circle leftcircle"></div>
        </div>
 </div>
.progress2{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        position: relative;
    }
   
    .rect{
        width: 100px;
        height: 200px;
        position: absolute;
        top:0;
        overflow: hidden;
    }
    .right{
        right:0;
    }
    .left{
        left:0;
    }
    .circle{
        width: 160px;
        height: 160px;
        border:20px solid rgb(41,137,216);
        border-radius: 50%;
        position: absolute;
        top:0;
        transform: rotate(45deg);
    }
    .rightcircle{
        border-top:20px solid #ccc;
        border-right:20px solid #ccc;
        right:0;
        animation: load_right 5s linear infinite;
    }
    .leftcircle{
        border-bottom:20px solid #ccc;
        border-left:20px solid #ccc;
        left:0;
        animation: load_left 5s linear infinite;
    }
    @keyframes load_right{
        0%{

            transform: rotate(45deg);
        }
        50%{

            transform: rotate(225deg);
        }
        100%{

            transform: rotate(225deg);
        }
    }
    @keyframes load_left{
        0%{

            transform: rotate(45deg);
        }
        50%{

            transform: rotate(45deg);
        }
        100%{
            transform: rotate(225deg);
        }
    }

利用CSS3实现进度条的两种姿势详解

总结

以上就是关于CSS3实现进度条的两种方法,希望对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。
 

HTML / CSS 相关文章推荐
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 HTML / CSS
CSS3实现头像旋转效果
Mar 13 #HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 #HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 #HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 #HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 #HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 #HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 #HTML / CSS
You might like
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP CURL使用详解
2019/03/21 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
解析python的局部变量和全局变量
2019/08/15 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
Python内存映射文件读写方式
2020/04/24 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
高二美术教学反思
2014/01/14 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
幼儿园老师寄语
2014/04/03 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书