Rumah > hujung hadapan web > tutorial css > 环形进度条效果怎么实现?用css3实现环形进度条效果代码示例

环形进度条效果怎么实现?用css3实现环形进度条效果代码示例

坏嘻嘻
Lepaskan: 2018-09-27 12:01:44
asal
5902 orang telah melayarinya

上一篇文章我们介绍了如何使用css3实现条形进度条效果(附完整代码),了解到进度条的实用性,那么今天来向大家介绍一下另外一种形式的进度条:环形进度条。

这种进度条适合应用于页面加载的时候和环形计时器的页面。本篇文章给大家带来的内容是关于如何使用css3实现环形进度条效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

如何使用css3实现条环进度条效果原理

  1. 首先我们需要画出圆形进度条,但是div格式都是方形的,这就需要用到border-radius将方形转换成圆形。

  2. 圆形的进度条一直处于旋转的状态,我们可以引用css3里面的rotage(deg)语句实现这一效果。

    3.这里我们详细梳理一下rotage(deg)的用法       

                  a.旋转:1.rotateX(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)//在Y方向平移a的像素距离。 

                                translateZ(a)//在Z方向平移a的像素距离。

如何使用css3实现条环进度条效果步骤(代码)

步骤一:HTML部分

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<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>

Salin selepas log masuk

步骤二:css部分

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

.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;

                   }

               }

Salin selepas log masuk

步骤三:js部分

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

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

        }

Salin selepas log masuk

实现效果如图所示

20170812145357174.gif

Atas ialah kandungan terperinci 环形进度条效果怎么实现?用css3实现环形进度条效果代码示例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan