自己遇到的一个需求，圆形的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. SQL server学习（一）数据库的基本知识、基本操作（分离、脱机、收缩、备份、还原、附加）和基本语法

    在软件测试中,数据库是必备知识,共同探讨. 阅读目录 基本知识 数据库发展史 数据库名词 SQL组成 基本操作 登录数据库操作 数据库远程连接操作 数据库分离操作 数据库脱机.联机操作 数据库收缩操作 ...

  2. python中with学习

    python中with是非常强大的一个管理器,我个人的理解就是,我们可以通过在我们的类里面自定义enter(self)和exit(self,err_type,err_value,err_tb)这两个内 ...

  3. CentOS 搭建Graylog集群详解

    1. Graylog2 简介 Graylog 是一个简单易用.功能较全面的日志管理工具,相比 ELK 组合, 优点: 部署维护简单,一体化解决方案,不像ELK三个独立系统集成. 查相比ES json语 ...

  4. nginx 部署

    安装nginx 1)安装pcre 从pcre的官网下载tar.gz包,官网地址为:https://sourceforge.NET/projects/pcre/files/pcre/,在这里我下载的是: ...

  5. 使用邮件监控Mxnet训练

    1. 前言 受到小伙伴的启发,就自己动手写了一个使用邮件监控Mxnet训练的例子.整体不算复杂. 2. 打包训练代码 需要进行监控训练,所以需要将训练的代码打包进一个函数内,通过传参的方式进行训练.还 ...

  6. webpack-dev-server配置指南（使用webpack3.0）

    最近正在研究webpack,听说webpack可以自己搭建一个小型的服务器(使用过vue-cli的朋友应该都见识到过),所以迫不及待的想要尝试一下.不过,在实际操作中发现,用webpack搭建服务器仍 ...

  7. 虚拟机VMware Workstation Pro下安装ubuntu-14.04.4（64位）方法（附ubuntu-14.04-desktop-amd64.iso下载链接）

    ubuntu-14.04-desktop-amd64.iso下载: 链接:http://pan.baidu.com/s/1bFi0d4 密码:yx0l 零基础linux使用入门教学视频分享: 链接:h ...

  8. keepalived实现nginx高可用

    keepalived是什么 keepalived直译就是保持存活,在网络里面就是保持在线了,也就是所谓的高可用或热备,用来防止单点故障(单点故障是指一旦某一点出现故障就会导致整个系统架构的不可用)的发 ...

  9. Linux文件系统的层级结构

    Linux文件系统的层级结构   文件结构 倒置的树状结构 :Linux的哲学思想是一切皆文件,把几乎所有资源统统抽象为文件形式:包括硬件设备,甚至通信接口等 根目录 :linux的文件起始均从唯一的 ...

  10. 使用脚本监控windows服务的方法

    以下脚本可监控某一个windows服务,发现其停止就立即重启之. @echo off rem 定义循环间隔时间和监测的服务: set secs=60 set srvname="NetWin ...