两种CSS3圆环进度条详解

晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法。

这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~。

第一种:通过overflow溢出隐藏的方式:

这种方法好处在于容易理解,只需要一层一层的嵌套,即可得到效果,但是实现起来较为繁琐,HTML的结构也比较冗余。

先看HTML结构:

    <div class="circle-one">
        <div class="circle-one-l">
            <div class="circle-one-l-in"></div>
        </div>
        <div class="circle-one-r">
            <div class="circle-one-r-in"></div>
        </div>
    </div>

.circle-one-l :用于控制左侧的显示范围。

.circle-one-l-in : 用于控制只显示半圆。

.circle-one-l-in:after : 用于生成一条完整的圆,这里的圆是通过边框线的方式显示出来的,所以对应的宽与高要进行一定的减去。

circle-one-r :用于控制右侧的显示范围。

  ...

在看CSS代码

        .circle-one{width: 200px;height: 200px;position:relative;margin:50px auto;overflow:hidden;}
        .circle-one-l,.circle-one-l-in{width: 100px;height: 200px;position:absolute;left:0px;top:0px;overflow:hidden;}
        .circle-one-l-in{
            transform-origin:100% 50%;
            transform:rotate(-180deg);
            animation:circle_one_l linear 2s  forwards;
        }
        .circle-one-l-in:after{
            content:‘ ‘;
            position:absolute;
            left:0;
            top:0;
            border-radius: 50%;
            border:10px solid #000;
            width: 180px;
            height: 180px;
        }
        .circle-one-r,.circle-one-r-in{width:100px;height:200px;position:absolute;right:0px;top:0px;overflow:hidden;}
        .circle-one-r-in{
            transform:rotate(-180deg);
            transform-origin:0% 50%;
            animation:circle_one_r linear 2s 2s  forwards;}
        .circle-one-r-in:after{
            content:‘ ‘;
            position:absolute;
            left:-100px;
            top:0;
            border-radius: 50%;
            border:10px solid #000;
            width: 180px;
            height: 180px;
        }
        @keyframes circle_one_l{
            0%{transform:rotate(-180deg);}
            100%{transform:rotate(0deg);}
        }
        @keyframes circle_one_r{
            0%{transform:rotate(-180deg);}
            100%{transform:rotate(0deg);}
        }

使用overflow溢出隐藏的方式实现的圆环进度效果,其核心实现就是通过overflow分别划分两个显示范围,然后在每个显示范围的内部,再在其子标签 -in 上通过使用overflow,来得到两个半圆,后期,在通过旋转这两个半圆,便得到进度的效果了。

第二种:通过使用clip:rect进行裁剪的方法:

这种方法的好处在于节省HTML标签结构,但是clip却不怎么好理解。

clip是一种CSS裁剪属性,只能作用在绝对定位(absolute)的元素上,可以控制元素可显示的范围。

clip有四个属性值,分别是top,right,bottom,left

格式:clip:rect(top,right,bottom,left)

可以形象的将clip:rect理解成一个点,而它的四个值:top,right,bottom,left,根据值的大于小,分别对上、右、下、左四个方向进行扩张或收缩。

*其中如果某个值是显示范围的最大值,可以用auto表示

----------------------------------------------------------------------------

预热说完,下面说正经的

使用clip裁剪方式实现的圆环进度效果,其核心实现就是通过clip裁剪出左右两个半圆,然后对半圆进行旋转,拼接出完整的圆环进度效果:

先看HTML结构:

    <div class="circle-two">
        <div class="circle-two-l"></div>
        <div class="circle-two-r"></div>
        <div class="circle-two-mask"></div>
    </div>

circle-two-l 这个div是用于控制左边显示区域,因为裁剪区域是: clip:rect(0,100px,auto,0);

circle-two-l:after 这是一个实心的黑色背景的圆形,但是通过裁剪区域只能显示半圆

circle-two-r 这个div是用于控制右边显示区域,因为裁剪区域是: clip:rect(0,auto,auto,100px)

circle-two-r:after 这是一个实心的黑色背景的圆形,但是通过裁剪区域只能显示半圆

circle-two-mask 则是遮罩,它与背景色相同。

下面看看CSS:

        .circle-two{width: 200px;height: 200px;position:relative;margin:50px auto;}
        .circle-two-l{width: 200px;height: 200px;position:absolute;left:0;top:0;clip:rect(0,100px,auto,0);}
        .circle-two-l:after{
            content:‘ ‘;
            background:#000;
            width:200px;
            height:200px;
            border-radius:50%;
            position:absolute;
            left:0;
            top:0;
            clip:rect(0,100px,auto,0);
            transform:rotate(-180deg);
            animation:circle_two_l linear 2s forwards;
        }
        .circle-two-r{width:200px;height: 200px;position: absolute;left:0;top:0;clip:rect(0,auto,auto,100px);}
        .circle-two-r:after{
            content:‘ ‘;
            background:#000;
            width:200px;
            height:200px;
            border-radius:50%;
            position:absolute;
            left:0;
            top:0;
            clip:rect(0,auto,auto,100px);
            transform:rotate(-180deg);
            animation:circle_two_r linear 2s 2s forwards;
        }
        .circle-two-mask{width: 180px;height: 180px;background:#fff;border-radius:50%;position:absolute;left:50%;top:50%;margin-top:-90px;margin-left:-90px;}

        @keyframes circle_two_l{
            0%{transform:rotate(-180deg);}
            100%{transform:rotate(0deg);}
        }
        @keyframes circle_two_r{
            0%{transform:rotate(-180deg);}
            100%{transform:rotate(0deg);}
        }

因此最终,分别通过控制旋转左右两个半圆,再结合 .circle-two-l ,   .circle-two-r clip控制的显示范围,便实现了进度的增加效果。

-----------------------------------

好了,结束,进被窝睡觉~明天继续奋斗,加油~

时间: 2024-10-13 00:53:20

两种CSS3圆环进度条详解的相关文章

Bootstrap 各种进度条详解

一:默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>. 添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 表示进度条在 60% 的位置. 让我们看看下面的实例: <!DOCTYPE html> <html> <head>

两种Redis持久化原理的详解

Redis为持久化提供了两种方式: RDB:在指定的时间间隔能对你的数据进行快照存储. AOF:记录每次对服务器写的操作,当服务器重启的时候会重新执行这些命令来恢复原始的数据. 本文将通过下面内容的介绍,希望能够让大家更全面.清晰的认识这两种持久化方式,同时理解这种保存数据的思路,应用于自己的系统设计中. 持久化的配置 RDB与AOF持久化的工作原理 如何从持久化中恢复数据 关于性能与实践建议 持久化的配置 为了使用持久化的功能,我们需要先知道该如何开启持久化的功能. RDB的持久化配置 # 时

27.QT-QProgressBar动态实现多彩进度条(详解)

如下图所示: 效果如下: (gif录制的动画效果不好,所以颜色有间隙) 介绍 通过qss实现,只需要一个多彩背景图,通过QImage获取颜色,然后来设置进度条,便可以实现动态多彩进度条(根据图片设定颜色) 其中,上面3个进度条就是通过以下3个图片实现的: 如果想实现其它颜色,只需要改图片即可 代码如下 ProgressBar.h: #ifndef PROGRESSBAR_H #define PROGRESSBAR_H #include <QtGui> class ProgressBar : p

CSS3中REM使用详解

在页面中设置字体,我们知道有常见的两种,px 和 em. px 在Web页面制作中,我们一般使用"px"来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用"em"来定义Web页面的字体. em 一般都是body的font-size为基准常用写法: 01 02 03 04 05 06 07 0

CSS3伪类选择器详解

前面花了两节内容分别在<CSS3基本选择器>和<CSS3属性选择器详解>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分——伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择器的使用方法.

CSS3新增属性text-shadow详解及燃烧的字体实战开发

今天我们有很多程序员在给文本设置样式时,都感觉无从下手.一般有两种情况: 1) 不知道关于文本到底有哪些样式属性: 2) 即使借助开发工具的自动提醒,依然不清楚样式属性的具体意思,以及具体用法. 今天这篇文章,我将带领大家一起来领受CSS3在文本样式应用方面的超强能力.通过精彩的实例,来使大家重新认识CSS3文本样式,真心希望大家通过此篇文章,即使不能做到精通CSS3的文本样式的应用,也会做到熟练应用. 实例: 如何利用CSS3制作燃烧的字体? 以前,如果我们网页上想要显示一个燃烧着的文本,大家

Swing中弹出对话框的几种方式_JOptionPane.showMessageDialog等详解

Swing中弹出对话框的几种方式_JOptionPane.showMessageDialog等详解 在swing中,基于业务的考量,会有对话框来限制用户的行为及对用户的动作进行提示. Swing中提供了JOptionPane类来实现类似Windows平台下的MessageBox的功能,同样在Java中也有,利用JOptionPane类中的各个static方法 来生成各种标准的对话框,实现显示出信息.提出问题.警告.用户输入参数等功能.这些对话框都是模式对话框. ConfirmDialog ---

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景 在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1

CSS3动画特效——transform详解

CSS3动画特效——transform详解 公共css .common{ width:100px; height:100px; margin:20px auto; background-color:#75C934; text-align:center; line-height:100px; font-size:18px; } 1)transform:rotate(value); 元素旋转 value为旋转度数 默认顺时针旋转. value若为负值则逆时针旋转. .box{ /*过渡效果*/ -w