自己遇到的一个需求，圆形的border加载。初听大家一定认为很简单，确实很简单，但是突然又加了一个需求，就是border的颜色要进行渐变，用了很多方法，可以实现渐变，直接的一个css属性是border-images，但是这个属性用上去之后，border就不能做成圆形了。网上也找了很多的资料，最多的就是用svg和canvas自己来画的，但是感觉很麻烦。最后自己用了一个异想天开的做法，就是让外边的background的背景色渐变，然后吧border的颜色设置成灰色，让底部的颜色一点一点显示。下边上代码！！！！

<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap,.circle,.percent{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.wrap{
top:50px;
left:50px;
background-color: #ccc;
background: linear-gradient(black,pink)
}
.circle{
box-sizing: border-box;
border:20px solid rgba(204,204,204,0);
clip:rect(0px,100px,200px,0px);
}
.clip-auto{
clip:rect(auto, auto, auto, auto);
}
.percent{
box-sizing: border-box;
top:-20px;
left:-20px;
}
.left{
transition:transform ease;
border:20px solid rgba(204,204,204,1);
/* clip: rect(0px,100px,200px,0px); */
clip: rect(0px,100px,200px,0px);
transform: rotate(0deg);
}
.right{
border:20px solid rgba(204,204,204,1);
clip: rect(0,200px,200px,100px);
transform: rotate(0deg.wth0{

width:0;
}
.num{
position: absolute;
box-sizing: border-box;
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
font-size: 40px;
left: 20px;
top: 20px;
border-radius: 50%;
background-color: #fff;
z-index: 1;
}
</style>

</head>
<body>
<div class="wrap">
<div class="circle clip-auto">
<div class="percent left "></div>
<div class="percent right "></div>
</div>
</div>
</body>
</html>

缩进什么的就不做了，如果有兴趣，看到文章的人可以自己去复制，缩进。控制也很简单。只需要控制right的类rotate（）就可以，不过要说一下，在rotare（180deg）的时候，要去掉lclip-auto的类，并且要改变left的clip的属性，改成（200px 100px 200px 0）

圆形border渐变加载的更多相关文章

  1. WPFbutton样式

    有四款button不同的风格 <Window x:Class="SjglzxRj.Window3" xmlns="http://schemas.microsoft. ...

  2. css+js调整当前界面背景音量

    展示效果 html代码: <div> <audio id="audio" controls src="https://dbl.5518pay.com/r ...

  3. H5滑条(input type=range)

    input[type=range] { -webkit-appearance: none; width: 230px; border-radius: 10px; /*这个属性设置使填充进度条时的图形为 ...

  4. 【转】自定义(滑动条)input[type="range"]样式

    1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome:  ...

  5. HMTL5滑动块研究

    滑动块图片 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  6. openlayers添加弹出框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. openlayers按坐标点播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. openlayers轨迹匀速播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. openlayers轨迹播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Judge Route Circle

    Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this robot m ...

  2. php中常用的字符串查找函数strstr()、strpos()实例解释

    string strstr ( string $haystack , mixed $needle [, bool $before_needle = false ] ) 1.$haystack被查找的字 ...

  3. java数据库编程之DAO模式

    第八章:DAO模式 8.1:JDBC封装 为了提高代码的维护性和扩展性,我们使用JDBC进行封装数据, 先定义统一的API,将操作数据的代码抽象到接口中,业务逻辑代码只需要调用这些接口的实现类的对象, ...

  4. Python自学笔记-字符串编码（来自廖雪峰的官网Python3）

    感觉廖雪峰的官网http://www.liaoxuefeng.com/里面的教程不错,所以学习一下,把需要复习的摘抄一下. 以下内容主要为了自己复习用,详细内容请登录廖雪峰的官网查看.   1.理解变 ...

  5. （转）C#中各种集合类比较

    数组(Array)的不足(即:集合与数组的区别) 1. 数组是固定大小的,不能伸缩.虽然System.Array.Resize这个泛型方法可以重置数组大小,但是该方法是重新创建新设置大小的数组,用的是 ...

  6. ZOJ1181 Word Amalgamation 字符串 排序查找

    传送门:ZOJ1181  思路:自身排序来判断两个字符串拥有相同的字符.   #include<cstdio> #include<cstdlib> #include<io ...

  7. 在Visual Studio 2013 中使用C++单元测试

    本文主要介绍在Visual Studio 2013中对代码进行单元测试的方法,包含了两方面的内容:对已有的Dll文件进行单元测试,以及对已有的源文件进行单元测试. 1. VS2013对DLL文件的单元 ...

  8. vim 自动在操作符 前后加上空格 C语言

    function! Align_Space() let current_line = getline('.') let replacement = substitute(current_line,'\ ...

  9. linux 远程操作（expect）

    Expect是在Tcl基础上创建起来的,它还提供了一些Tcl所没有的命令,它可以用来做一些linux下无法做到交互的一些命令操作,在远程管 理方面发挥很大的作用. spawn命令激活一个Unix程序来 ...

  10. PHP连接mysql数据库进行增删改查--删除

    删除: 1.首页 在foreach里面加入   <td><a href='dele.php?id={$i[0]}'>删除</a></td> 在上面< ...