css步骤流程条样式圆圈,css加圆圈的样式

如何利用CSS3实现圆形进度条

html部分：

pre class="brush:html;toolbar: true; auto-links: false;"div class="div1" div class="right-div2" div class="right-div3"/div /div div class="left-div2" div class="left-div3"/div /div /div div class="div4"span0/span%/div/pre

最内层的div3裁剪一半然后旋转需要的角度， 父级div2裁剪一半，此时已经裁剪出来了那个扇形了 最后在上面加个圆形遮盖层

css代码：

pre class="brush:css;toolbar: true; auto-links: false;".div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200px; height:200px; border-radius:50%;} .div1 { background:#ccc; position:relative;} .right-div2, .right-div3, .left-div2, .left-div3 { position:absolute; left:0; top:0;} .right-div2, .right-div3 { clip:rect(0,auto,auto,100px);} .left-div2, .left-div3 { clip:rect(0,100px,auto,auto);} .right-div3 { background:#f00; transform:rotate(-180deg);} .left-div3 { background:#f00; transform:rotate(-180deg);} .div4 { position:absolute; top:25px; left:25px; width:150px; height:150px; line-height:150px; text-align:center; border-radius:50%; background:#fff;}/pre

js代码：

pre class="brush:js;toolbar: true; auto-links: false;"$(function(){ var a = 0; var b = 0; var timer = setInterval(function(){ a++; if(a=50){ //-180deg是0%，转换一下 b = a*3.6-180; $('.right-div3').css('transform','rotate(' + b + 'deg)'); }else if(a50a=100){ //超过50%，需要修改左边的,右边0deg是50% $('.right-div3').css('transform','rotate(0)'); //左边0deg是100%，转换一下 b = a*3.6-360; $('.left-div3').css('transform','rotate(' + b + 'deg)'); }else{ clearInterval(timer); return; } $('.div4 span').html(a); },200); });/pre

相关问答

Q1: 怎样用css写出圆形边框

1、首先打开sublime text编辑器，新建一个html文件，里面写入一个p标签：

2、然后设置p标签的样式，这里先设置一个边框，然后设置圆角边框，主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值，不可为负值，这里圆角的值越大，圆角的弧度也越大：

3、最后打开浏览器，就可以看到圆角边框了：

Q2: 如何用纯css实现一个动态画圆环效果

html结构如下：

div class="wrap"

div class="circle"/div

div class="top"/div

div class="bottom"/div

/div

实现的思路就是：

1. 首先定义外层容器大小，本例采用200x200，

.wrap{

position: relative;

width: 200px;

height: 200px;

}

2. 通过border-radius画一个圆环，这个比较简单

.circle{

height: 100%;

box-sizing: border-box;

border: 20px solid red;

border-radius: 50%;

}

效果如下：

2. 然后用上下两层挡板遮住这个圆环，通过旋转挡板将圆环慢慢露出，过程如下图所示：

通过将下层挡板旋转180deg就能够实现将下半圆慢慢画出的效果，画完以后就需要将其隐藏起来，那该如何实现呢？

这里我用了opacity这个属性，当100%时将其设置为0，同时设置animation-fill-mode: forwards;这样就隐藏了

0%{

transform: rotate( 0 );

}

99%{

transform: rotate( 180deg );

opacity: 1;

}

100%{

transform: rotate( 180deg );

opacity: 0;

}

3. 那如何显示上半圆呢？同样的思路我们对上面挡板进行旋转，通过实际效果我们可以看到，虽然上半圆露出来了，但是确把下半圆给遮挡了。

如何解决这个问题呢？

我们可以在下半圆和挡板间再放一个半圆，同时设置他们的z-index，让上面的挡板旋转时被下半圆遮住，这样就可以了。

说的有些复杂，相当于我们现在有四个元素：上挡板，下挡板，底部的大圆环，一个处在下挡板和大圆环间的半圆。

它们的z-index如下：

上挡板：1

下挡板和底部的大圆间的半圆：2

下挡板：3

为了不增加额外的元素，下挡板和底部的大圆间的半圆我们通过伪元素来实现

.circle:before{

content: '';

position: absolute;

display: block;

width: 100%;

height: 50%;

box-sizing: border-box;

top: 50%;

left: 0;

border: 20px solid red;

border-top: transparent;

border-radius: 0 0 50% 50%/ 0 0 100% 100%;

z-index: 2;

}

4. 组后再结合css3的transform动画就可以了，需要注意的是，上挡板和下挡板动画是同时开始了，所以上挡板的动画要设置一个延时，时长就是下挡板动画的时长

本例用到的知识点如下：

1. 如何画一个圆环

2. 如何画一个半圆

3. css3动画

4. 定位

最终代码如下：

!DOCTYPE html

html

head

meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"

meta http-equiv="content-type" content="text/html;charset=utf-8"

title动态画一个圆环/title

style

*{

margin: 0; padding: 0;

}

.wrap{

position: relative;

width: 200px;

height: 200px;

}

.circle{

height: 100%;

box-sizing: border-box;

border: 20px solid red;

border-radius: 50%;

}

.circle:before{

content: '';

position: absolute;

display: block;

width: 100%;

height: 50%;

box-sizing: border-box;

top: 50%;

left: 0;

border: 20px solid red;

border-top: transparent;

border-radius: 0 0 50% 50%/ 0 0 100% 100%;

z-index: 2;

}

.top, .bottom{

position: absolute;

left: 0px;

width: 100%;

height: 50%;

box-sizing: border-box;

background: white;

}

.top{

top: 0;

z-index: 1;

transform-origin: center bottom;

animation: 1s back-half linear 1s;

animation-fill-mode: forwards;

}

.bottom{

z-index: 3;

top: 50%;

transform-origin: center top;

animation: 1s front-half linear;

animation-fill-mode: forwards;

}

@keyframes front-half{

0%{

transform: rotate( 0 );

}

99%{

transform: rotate( 180deg );

opacity: 1;

}

100%{

transform: rotate( 180deg );

opacity: 0;

}

}

@keyframes back-half{

0%{

transform: rotate( 0 );

}

99%{

transform: rotate( 180deg );

opacity: 1;

}

100%{

transform: rotate( 180deg );

opacity: 0;

}

}

/style

/head

body

div class="wrap"

div class="circle"/div

div class="top"/div

div class="bottom"/div

/div

/body

/html