<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>多用户留言系统-</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style>

   .wrapper{

    width:120px;

    height:120px;

    position: absolute;

    left:0px;

    top:0px;

    background: #eee;

   }

   .circle{

    width:120px;

    height:120px;

    position: absolute;

    left:0px;

    top:0px;

   }

   .left-circle{

      clip: rect(0,60px,120px,0px);

   }

   .right-circle{

      clip: rect(0,120px,120px,60px);

   }

   .right{

    transform: rotate(-180deg);

    position: absolute;

    height:100px;

    width:100px;

    border-radius: 60px;

    border: 10px solid red;

    clip: rect(0,120px,120px,60px);

   }

   .left{

    height:100px;

    width:100px;

    transform: rotate(-180deg);

    position: absolute;

    border-radius: 60px;

    border: 10px solid green;

    clip: rect(0,60px,120px,0px);

   }

</style>

</head>

<body>

<div class="wrapper">

    <div class="circle right-circle">

      <div class="right" style="transform: rotate(-160deg);"></div>

    </div>

    <div class="circle left-circle">

      <div class="left" style="transform: rotate(-180deg);"></div>

    </div>

</div>

</body>

</html>

原理：

弄一个外部div包裹着，里面有两个二级div，都是只显示一般，左边的只显示左半部，右边的只显示右半部，二级div下都有一个作为旋转的div，他们也是只显示一般，但是和其父级div的方向刚好相反，然后通过旋转来显示出来，当第一个三级div旋转完之后，第二个三级div旋转，直至填满圈圈　　

css3圈圈进度条的更多相关文章

  1. CSS3动画进度条

    CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

  2. 纯CSS3制作进度条源代码

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

  3. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  4. 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...

  5. css3实现进度条的模拟

    两种进度条动画的实现: 1.css3,但IE9-不支持. 2.js动画,兼容性好,但没有css3实现的顺畅 Demo: <html>    <head>        < ...

  6. css3条纹进度条

    新建div,取名progress,如下 <div class="progress"></div> 在里面插入条纹进度条,以及进度显示文本进度: <di ...

  7. 学习 | css3实现进度条加载

    进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验. 进度条的的实现分为3大部分:1.页面布局,2.进度条动效,3.何时进度条增加. 文件目录 加载文件顺序 <link rel=& ...

  8. css3彩色进度条

    <html>    <head>        <title>progress</title>        <script type=" ...

  9. css3实现进度条

    HTML 结构很简单,但不是 Single Element: <div class="spinner"><i></i></div> ...

随机推荐

  1. centos安装redis-3.2.3

    这次介绍的是在虚拟机centos下安装redis-3.2.3 首先进入官网http://redis.io/download

  2. 剖析c++（三） 类对象在内存中的布局

    基本规则: 1.各data member的自然边界为其字节大小(char为1,short为2,int为4),并按照各自的自然边界对齐: 2.整个object的总自然边界为最大data memeber的 ...

  3. linux 命令行更新sdk

    ./android list sdk --proxy-host android-mirror.bugly.qq.com --proxy-port 8080 --no-ui -a -s ./androi ...

  4. navicat:cannot create oci environment

    1.请注意红色箭头处的配置是从oracle官网下载的安装包 ,当然百度也是很强大的.(建议是在navicat安装目录下解压) 2.红色方框内的是你本地的oracle数据库的sqlplus.exe启动地 ...

  5. github使用入门 之GIT GUI Windows版

    申明下是原创. 这二天网上也看了不少关于github使用的文章,github对代码管理也开始用起来了.这篇给github新手看,大牛们请跳过. github说白了就是版本管理库,最常用的就是程序代码管 ...

  6. WIN7下关闭驱动数字签名检查的方法

    内容是转的,最后一步貌似没什么用处,水印是去不掉的,不过也无所谓,关键是驱动能用了,要不完全瞎了 实测win7 32位旗舰版可用   ================================= ...

  7. 动态共享库(so)开发精悍教程

    动态共享库(so)开发精悍教程 翻译并根据实际情况进行了小小修改,仅关注Linux下动态共享库(Dynamic shared library .so)的开发. 1 简单的so实例 源文件 //test ...

  8. hackerrank【Lego Blocks】:计数类dp

    题目大意: 修一个层数为n,长度为m的墙,每一层可以由长度为1.2.3.4的砖块构成. 每一层都在同一个长度处出现缝隙是方案非法的,问合法的方案数有多少种 思路: 先求出总方案,再减去所有非法的方案数 ...

  9. Dijkstra优先队列优化

    Dijkstra算法的核心思想就是两步排序,一个是对于一个点而言,他的最小边要经过所有其他点最小边的测试才能确认,也就是说要在这其中找一个最大的边出来:第二个是对于每次循环而言的,每次的更新d数组都是 ...

  10. mac ssd开启trim

    输入以下指令: 为了安全,此步为备份驱动 (可能需要输入密码) sudo cp -r /System/Library/Extensions/IOAHCIFamily.kext/Contents/Plu ...