自己遇到的一个需求，圆形的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. asp.net core封装layui组件示例分享

    用什么封装?自然是TagHelper啊,是啥?自己瞅文档去 在学习使用TagHelper的时候,最希望的就是能有个Demo能够让自己作为参考 怎么去封装一个组件? 不同的情况怎么去实现? 有没有更好更 ...

  2. “一切都是消息”--MSF（消息服务框架）之【发布-订阅】模式

    在上一篇,“一切都是消息”--MSF(消息服务框架)之[请求-响应]模式 ,我们演示了MSF实现简单的请求-响应模式的示例,今天来看看如何实现[发布-订阅]模式.简单来说,该模式的工作过程是: 客户端 ...

  3. extract-text-webpack-plugin 的使用及安装

    extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;首先我先来介绍下这个插件的安装方法: npm install ...

  4. 【转】Python实现修改Windows CMD命令行输出颜色（完全解析）

    用Python写命令行程序的时候,单一的输出颜色太单调.其实我们可以加些色彩,比如用红色表示警告,绿色表示结果正常等.网上也有几篇类似的帖子,但是没有把问题讲清楚,贴的代码也不是太清晰.这里,对Win ...

  5. Java面向对象 继承（上）

       Java面向对象 继承 知识概要:         (1)继承的概述 (2)继承的特点 (3)super关键字 (4)函数覆盖 (5) 子类的实例化过程 (6) final关键字 (1)继承 ...

  6. Kindeditor JS 取值问题以及上传图片后回调等

    KindEditor.ready(function (K) { var editor = K.create('#editor_id', { //上传管理 uploadJson: '/js/kinded ...

  7. RabbitMQ高可用集群配置

    1.安装RabbitMQ 1)下载和安装erlang 下载erlang wget http://www.rabbitmq.com/releases/erlang/erlang-18.1-1.el6.x ...

  8. vue-cli 自定义指令directive 添加验证滑块

    vue项目注册登录页面遇到了一个需要滑块的功能,网上看了很多插件发现都不太好用,于是自己写了一个插件供大家参考: 用的是vue的自定义指令direcive,只需要在需要的组件里放入对应的标签嵌套即可: ...

  9. win10 uwp 关联文件

    有时候应用需要打开后缀名为x的文件,那么如何从文件打开应用? 首先,需要打开 Package.appxmanifest 添加一个功能,需要添加最少有名称,文件类型. 上面的图就是我添加jpg 的方法, ...

  10. C#实现局域网内远程开机

    1.远程开机原理 远程开机Wake on LAN(WOL),俗称远程唤醒,远程唤醒的实现主要是向目标主机发送特殊格式的数据包,是AMD公司制作的MagicPacket这套软件以生成网络唤醒所需要的特殊 ...