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

怎样用css写出圆形边框

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

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

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

如何用纯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