環形進度條效果怎麼實現？用css3實作環形進度條效果程式碼範例-css教學-PHP中文網

首頁

web前端

css教學

環形進度條效果怎麼實現？用css3實作環形進度條效果程式碼範例

坏嘻嘻

Sep 27, 2018 pm 12:01 PM

css3進度條

上一篇文章我們介紹了如何使用css3實現條形進度條效果（附完整程式碼），了解到進度條的實用性，那麼今天來向大家介紹一下另一種形式的進度條：環形進度條。

這種進度條適合套用於頁面載入的時候和環形計時器的頁面。這篇文章帶給大家的內容是關於如何使用css3實現環形進度條效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

如何使用css3實作條環進度條效果原理

#首先我們需要畫出圓形進度條，但是div格式都是方形的，這就需要用到border-radius將方形轉換成圓形。
圓形的進度條一直處於旋轉的狀態，我們可以引用css3裡面的rotage（deg）語句來實現這個效果。

3.這裡我們詳細整理rotage（deg）的用法

# rot aX

.. (deg) //繞x軸旋轉

2.rotateY(deg) //繞Y軸時旋轉 3. rotateZ(deg) //繞Z軸旋轉

b.平移：translate(a,b) //在x，y方向平移a,b像素距離。利用translate(-50%,50%)可以實現居中。

translateX(a) //上在X方向上平移a的像素所處。

translateY(a)//「朝向「朝」」方的像素距離下。 translateZ(a)//上在Z方向上平移a時的像素距離。

如何使用css3實作條環進度條效果步驟（程式碼）

步驟一：HTML部分

<div class="progress_wrap js_halfClassNameObj">
    <div class="right under">
        <div class="circleProgress rightcircle"></div>
    </div>
    <div class="left under">
        <div class="circleProgress leftcircle"></div>
    </div>
    <div class="right up">
        <div class="circleProgress rightcircle js_progressRight" 
        style="-webkit-transform:rotate(&#39;+circleData.rightRotate.toString()+&#39;deg)"></div>
    </div>
    <div class="left up">
        <div class="circleProgress leftcircle js_progressLeft"
         style="-webkit-transform:rotate(&#39;+circleData.leftRotate.toString()+&#39;deg)"></div>
    </div>
    //percent小于50时需要使用遮罩进行遮挡超出环形范围部分
    <div class="left up_left_cover js_giftLeftCover" style="display:&#39;+circleData.leftCircleDisplay+&#39;">
        <div class="circleProgress leftcircle color_border_t_l04"></div>
    </div>
    <div class="num">
        <div>剩余</div>
        <div class="js_giftPercent">&#39;+circleData.percent+&#39;%</div>
    </div>
</div>

步驟二：css部分

.progress_wrap{
                   position: relative;
                   margin:0 0 0 .14rem;
                   width:.92rem;height:.92rem;
                   //little和more用来展示黄色和绿色的效果
                   &.little{
                       .under{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_under_little;
                           }
                           .rightcircle{
                               border-right:$progress_border_under_little;
                           }
                           .leftcircle{
                               border-left:$progress_border_under_little;
                           }
                       }
                       .up{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_up_little;
                           }
                           .rightcircle{
                               border-right:$progress_border_up_little;
                           }
                           .leftcircle{
                               border-left:$progress_border_up_little;
                           }
                       }
                       //用遮挡实现左侧剩余百分比，遮住超出环形范围部分；核心是使用同心圆进行边框进行遮挡
                       .up_left_cover{
                           width:.47rem;height:.92rem;
                           .leftcircle{
                               top:-.02rem;
                               width:.74rem;height:.74rem;
                               border:.11rem solid transparent;
                               border-top:$progress_border_up_left_cover_little;
                               border-left:$progress_border_up_left_cover_little;
                               //实际值为195deg,被遮挡环颜色值深有光晕,需要将角度进行微调（-191deg）
                               进行完全遮挡
                               -webkit-transform:rotate(-191deg);
                           }
                       }
                   }
                   &.more{
                       .under{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_under;
                           }
                           .rightcircle{
                               border-right:$progress_border_under;
                           }
                           .leftcircle{
                               border-left:$progress_border_under;
                           }
                       }
                       .up{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_up;
                           }
                           .rightcircle{
                               border-right:$progress_border_up;
                           }
                           .leftcircle{
                               border-left:$progress_border_up;
                           }
                       }
                   }
                   .right,.left{
                       position: absolute;top:0;overflow:hidden;
                       width:.46rem;height:.92rem;
                       .circleProgress{
                           position: absolute; top:0;
                           width: .78rem; height: .78rem;
                           border:.07rem solid transparent; border-radius: 50%;
                       }
                       .rightcircle{
                           right:0;
                           -webkit-transform: rotate(15deg);
                       }
                       .leftcircle{
                           left:0;
                           -webkit-transform: rotate(-15deg);
                       }
                   }
                   .right{
                       right:0;
                   }
                   .left{
                       left:0;
                   }
                   .num{
                       position: absolute;left:50%;top:50%;
                       width:.5rem;
                       transform:translate(-50%,-50%);
                       font-size:.12rem;color:$public_auxiliary_col;text-align:center;line-height:.26rem;
                   }
               }

步驟三：js部分

function giftCircleProgressFn(per){
            var circleData = {};
            var percent = parseInt(per);
            //领取进度环形颜色className
            var halfClassName = percent<50?"little":"more";
            //左半环遮罩层显示样式状态
            var leftCircleDisplay = percent<50?"block":"none";
            var leftRotate = 0;
            var rightRotate = 0;
            //以50%为界限;<50%:右半圆占比为0,左半圆需要使用遮罩进行遮挡,展示剩余部分
            //           >50%:左半圆占比100%,右半圆直接使用百分比计算所占部分即可
            //注意：在半圆中计算百分比时,要将百分比乘以2。
            if(percent<50){
                leftRotate = -15-180+150*(percent*2)/100;   
                rightRotate = -135;
            }else{
                leftRotate = -15;
                rightRotate = -135+(150*((percent-50)*2)/100);   //比例在半环计算需要*2倍
            }
            circleData = {
                leftRotate:leftRotate,  //左半环进度
                rightRotate:rightRotate, //右半环进度
                halfClassName:halfClassName, //50% 进度环 变色
                leftCircleDisplay:leftCircleDisplay, //左半环遮罩
                percent:per  //进度百分比
            }
            return circleData
        }

實作效果如圖所示

######################################

以上是環形進度條效果怎麼實現？用css3實作環形進度條效果程式碼範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript 如何实现页面加载进度条功能？Oct 27, 2023 am 08:57 AM

JavaScript如何实现页面加载进度条功能？在现代互联网应用中，页面加载速度是用户体验的关键因素之一。为了向用户展示加载过程，许多网站和应用程序会使用加载进度条。JavaScript提供了一种简单而有效的方法来实现页面加载进度条功能。具体实现过程如下：创建HTML结构首先，在页面的合适位置创建一个进度条的HTML结构，常见的是将进度条放置在

如何使用Vue实现进度条特效Sep 19, 2023 am 09:22 AM

如何使用Vue实现进度条特效进度条是常见的一种界面元素，它可以用来展示一个任务或操作的完成情况。在Vue框架中，我们可以通过一些简单的代码实现进度条的特效效果。本文将介绍如何使用Vue来实现进度条特效，并提供具体代码示例。创建Vue组件首先，我们需要创建一个Vue组件来实现进度条的功能。在Vue中，组件是可以复用的，我们可以在多个地方使用。创建一个名为Pro

如何使用HTML和CSS设置进度条的颜色？Sep 19, 2023 pm 08:25 PM

在网站开发中，进度条是网站的重要组成部分。进度条显示了进程的进度。借助它，用户可以看到网站上正在进行的工作的状态，包括加载时间、文件上传、文件下载和其他类似任务。默认情况下，它呈灰色。然而，为了使进度条突出并具有视觉吸引力，可以使用HTML和CSS来改变它们的颜色。什么是进度条？进度条用于显示任务的进度。它是一个图形用户界面元素。它基本上由一个水平条组成，随着任务的进行逐渐填充，同时伴随着百分比值或其他完成指示器。进度条在Web应用程序中用于向用户提供关于完成诸如文件上传、文件下载或软件安装等过

css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

如何使用HTML和CSS创建进度条Sep 05, 2023 am 09:09 AM

概述进度条是任何Web应用程序的主要组件。进度表明某个项目或任务的完成情况。在本模块中，我们将使用HTML构建进度条，并通过CSS对其进行样式设置。我们还将为进度条提供进度动画。在此任务中，我们将使用@keyframes使进度条动画化。使用动画样式属性，例如动画持续时间、名称、计时等。算法第1步-在文本编辑器中创建HTML样板。第2步-创建父div容器并将类名称定义为barContainer。第3步-现在创建当前父div的另一个子级并定义类名。第4步-创建一个在进度中继承的子级，该子级将被动画化

css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形；可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果，animation属性用于设置动画样式，transform属性用于设置变形样式。

如何使用Vue和Element-UI实现进度条和加载动画效果Jul 21, 2023 pm 08:54 PM

如何使用Vue和Element-UI实现进度条和加载动画效果Vue.js是一款轻量级的前端框架，而Element-UI是一个基于Vue.js的UI组件库，它提供了丰富的组件和交互效果，可以帮助我们快速开发出漂亮的前端界面。本文将介绍如何使用Vue和Element-UI实现进度条和加载动画效果。1.安装并引入Element-UI首先，

Vue组件开发：进度条组件实现方法Nov 24, 2023 am 08:56 AM

Vue组件开发：进度条组件实现方法前言：在Web开发中，进度条是一种常见的UI组件，在数据请求、文件上传、表单提交等场景中常用来显示操作的进度。在Vue.js中，通过自定义组件的方式，我们可以很方便地实现一个进度条组件，本文将介绍一种实现方法，并提供具体的代码示例。希望能对Vue.js初学者有所帮助。组件的结构和样式首先，我们需要定义进度条组件的基本结构和样

See all articles