自己遇到的一个需求，圆形的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. 如何科学地蹭热点：用python爬虫获取热门微博评论并进行情感分析

    前言:本文主要涉及知识点包括新浪微博爬虫.python对数据库的简单读写.简单的列表数据去重.简单的自然语言处理(snowNLP模块.机器学习).适合有一定编程基础,并对python有所了解的盆友阅读 ...

  2. 57、Bootstrap中文文档

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...

  3. 史上前端面试最全知识点（附答案）---html & js & css

    史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...

  4. Python使用Scrapy爬虫框架全站爬取图片并保存本地(妹子图)

    大家可以在Github上clone全部源码. Github:https://github.com/williamzxl/Scrapy_CrawlMeiziTu Scrapy官方文档:http://sc ...

  5. zoj3211dream city dp 斜率

    Dream City Time Limit: 1 Second      Memory Limit:32768 KB JAVAMAN is visiting Dream City and he see ...

  6. maven私服 nexus2.x工作目录解读（翻译文档）

    安装nexus repository manager oss 或pro版本时,会创建两个目录:一个目录包含运行环境及应用,通常符号链接为nexus:一个目录包含所有的配置和数据,通常为sonatype ...

  7. （@WhiteTaken）设计模式学习——享元模式

    继续学习享元模式... 乍一看到享元的名字,一头雾水,学习了以后才觉得,这个名字确实比较适合这个模式. 享元,即共享对象的意思. 举个例子,如果制作一个五子棋的游戏,如果每次落子都实例化一个对象的话, ...

  8. 【node】使用nvm管理node版本

    写在前面 nvm(nodejs version manager)是nodejs的管理工具,如果你想快速更新node版本,并且不覆盖之前的版本:或者想要在不同的node版本之间进行切换: 使用nvm来安 ...

  9. 【框架学习与探究之AOP--Castle DynamicProxy】

    声明 本文欢迎转载,原始地址:http://www.cnblogs.com/DjlNet/p/7603654.html 前言 先说一点废话,在此之前博主也在早期就接触了或者看了些许AOP相关的文章,然 ...

  10. WPF 绑定密码

    我们发现我们无法绑定密码框的密码,PasswordBox 的 Password 不能绑定. 我们想做 MVVM ,我们需要绑定密码,不能使用前台 xaml.cs 监听 密码改变得到密码的值,传到 Vi ...