css3圆弧占比,圆形进度条/百分比数据 --- 利用css3和js实现

ゝ一纸荒年。 2022-09-02 14:54 344阅读 0赞

乐师傅-注册

body \{

font-family: "微软雅黑";

\}

.circle \{

width: 200px;

height: 200px;

position: absolute;

border-radius: 50%;

background: \#0cc;

\}

.pie\_left, .pie\_right \{

width:200px;

height:200px;

position: absolute;

top: 0;left: 0;

\}

.left, .right \{

width:200px;

height:200px;

background:\#00aacc;

border-radius: 50%;

position: absolute;

top: 0;

left: 0;

\}

.pie\_right, .right \{

clip:rect(0,auto,auto,100px);

\}

.pie\_left, .left \{

clip:rect(0,100px,auto,0);

\}

.mask \{

width: 150px;

height: 150px;

border-radius: 50%;

left: 25px;

top: 25px;

background: \#FFF;

position: absolute;

text-align: center;

line-height: 150px;

font-size: 20px;

font-weight: bold;

color: \#00aacc;

\}

0%

15%

30%

60%

90%

$(function() \{

$('.circle').each(function(index, el) \{

var num = $(this).find('span').text() \* 3.6;

if (num<=180) \{

$(this).find('.right').css('transform', "rotate(" + num + "deg)");

\} else \{

$(this).find('.right').css('transform', "rotate(180deg)");

$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");

\};

\});

\});

发表评论取消回复

表情：

评论列表（有 0 条评论，344人围观）

还没有评论，来说两句吧...

相关阅读

相关 Qt 圆形进度条实现

1.运行截图 ![20191017181959480.gif][]![20191017182024918.gif][]![20191017182041705.gif][]

分手后的思念是犯贱/ 2023年06月08日 09:25/ 0 赞/ 58 阅读

相关纯css实现进度条百分比效果

> 一个完整的进度条效果其实可以拆分一下 > 一段背景 > 一小段的静态的斜纹进度条 > 斜纹进度条用线性渐变 linear-gradien

亦凉/ 2022年10月07日 04:59/ 0 赞/ 325 阅读

相关 CSS实现进度条和订单进度条 (实用、赞）

原文出处：[CSS实现进度条和订单进度条 - 郭锦荣 - 博客园][CSS_ - _ -] 效果图如下： ![watermark_type_ZHJvaWRzYW5zZmF

女爷i/ 2022年09月14日 14:23/ 0 赞/ 278 阅读

相关 css3圆弧占比,圆形进度条/百分比数据 --- 利用css3和js实现

乐师傅-注册 body \{ font-family: "微软雅黑"; \} .circle \{ width: 200px; height: 200px; po

ゝ一纸荒年。/ 2022年09月02日 14:54/ 0 赞/ 345 阅读

相关纯css3实现的圆形进度条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style typ

向右看齐/ 2022年08月03日 03:10/ 0 赞/ 305 阅读

相关 css+js 进度条 .

<html> <head> <title>简单的进度条</title> <mce:style type="text/css"><!-- \ProgressBar

た入场券/ 2022年06月18日 05:48/ 0 赞/ 235 阅读

相关 css 实现进度条条形码和滚动

进度条实现隔色条形用到 background-imag .progress-blue2{ background-image: -webkit-lin

ゝ一纸荒年。/ 2022年05月31日 04:25/ 0 赞/ 272 阅读

相关详解用CSS3制作圆形滚动进度条的动画效果

今天手把手教大家用CSS3制作圆形滚动进度条动画！先看一下效果图，会提升我们的学习兴趣哟： ![70][] > 第一种效果： html结构： <div id

た入场券/ 2022年05月19日 05:34/ 0 赞/ 619 阅读

相关 h5圆形百分比进度条

但不支持IE浏览器：[http://www.htmleaf.com/html5/html5-canvas/201705154511.html][http_www.htmleaf

古城微笑少年丶/ 2022年04月23日 12:26/ 0 赞/ 320 阅读

相关纯CSS3进度条制作-Pure CSS3 Progress Bar

1.效果分析纯CSS3实现进度条的制作，效果如下图所示，详见----[demo][]\---- ![20130506213916831][] 2.难点分析圆角

骑猪看日落/ 2022年02月25日 00:52/ 0 赞/ 310 阅读