近日在开发的页面中，需要制作一个动态的圆形进度条，首先想到的是利用两个矩形，宽等于直径的一半，高等于直径，两个矩形利用浮动贴在一起，设置overflow：hidden属性，作为盒子，内部有一个与其宽高相等的子盒子，左侧的子盒子左上角和左下角以及右侧子盒子的右上角和右下角利用border-radius：半径，这样两个矩形便组成了一个完整的圆形。

　　我们让左侧的子盒子绕着右边的中点旋转180°，这样左侧的半圆就隐藏了，右侧半圆同理。这个地方设置旋转中心是用的transform-origin属性，第一个值是X轴方向，第二个值是Y轴方向，可以用left，right，top，bottom，center这些词，也可以用数值，数值的话是以图形的左上角为原点。

　　然后我们给两个半圆设置边框，并且左边的半圆的右边框设置为none，右边半圆的左边框设置为none。此时一个完整的圆环就设置完毕了，然后通过动画旋转半圆，边框从隐藏区域逐渐进入可视区域，我们看到的效果就是圆形进度条的加载过程。如下：

　　这个方法在PC端没有太大问题，然而在移动端，由于浏览器的渲染等问题，旋转过程中圆角消失，或是出现较大锯齿导致边框部分缺失。

　　这时我们就不用边框来作进度条，而是给圆形一个背景色，再在上面覆盖一个半径稍小的圆形遮罩，这样漏出一个圆环可以当作进度条，同样可以实现以上功能。如下：

　　另外在这个动画执行的过程中，我还发现有个元素的overflow:hidden样式失效，后来在网上查阅了相关文章，发现overflow在visible以外其他值得时候，当transform发生时会重写，因此我的旋转动画发生时，才会出现overflowhidden失效的情况。此时我们只需要给失效元素加上z-index：1的样式，便解决了这个问题。

　　更于2017.8.14日

　前几天突然发现一个问题，上图所示border-radius圆角溢出的问题在iPhone7机型上出现，而其他iPhone机型上又没问题，并且两台不同版本iPhone的IOS版本都是一样的，这也让我非常郁闷。通过测试，发现仍然是因为transform导致的元素溢出问题。后来通过CSS3一个新属性“mask-img”顺利解决了这个问题，起原理如下图（此图源自网络）

　　background：url("color.png");

　　mask-img：url("mask.png");

　　此设置是先给元素设置背景图片，再用mask.png的透明部分遮住背景图，有颜色的部分反而是透明的，会显露出元素的背景图。于是我们制作 了一张圆形遮罩图用来遮住圆角溢出部分，便解决了这个问题。此外mask-size属性可以设置遮罩图的尺寸，也非常方便。

更于2018.6.25

阅读量挺高的，不过可能只有文字会比较抽象，那就贴一个示例代码吧，为大家提供一个思路

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        html {

            font-size:20px;

        }

        .centerBox  {

            width: 6.25rem;

            height: 6.25rem;

            border-radius: 50%;

            position: absolute;

            left: 6.25rem;

            top: 1rem;

            background: rgba(255, 255, 255, 0.4);

            -webkit-box-sizing: content-box;

        }

        .leftBox,.rightBox{

            width: 3.125rem;

            height: 6.25rem;

            overflow: hidden;

            float: left;

        }

        .roundLeft{

            width: 3.125rem;

            height: 6.25rem;

            border-radius: 3.125rem 0 0 3.125rem;

            overflow: hidden;

            transform: rotateZ(-180deg);

            -webkit-transform-origin: right center;

            background-color: red;

        }

        .roundRight {

            width: 3.125rem;

            height: 6.25rem;

            border-radius: 0 3.125rem 3.125rem 0;

            overflow: hidden;

            transform: rotateZ(-160deg);

            -webkit-transform-origin: left center;

            background-color: red;

        }

        .roundMask {

            width: 5.85rem;

            height: 5.85rem;

            background-color: #1E9BF9;

            border-radius: 50%;

            position: absolute;

            top: 0.2rem;

            left: 0.2rem;

            overflow: hidden;

        }

    </style>

</head>

<body>

<div class="centerBox">

    <div class="leftBox">

        <div class="roundLeft"></div>

    </div>

    <div class="rightBox">

        <div class="roundRight"></div>

    </div>

    <div class="roundMask">

    </div>

</div>

</body>

</html>

移动端纯CSS3制作圆形进度条所遇到的问题的更多相关文章

  1. 纯CSS3实现圆形进度条动画

    悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...

  2. 微信小程序纯css制作圆形进度条所遇到的问题

    wrapBox:最外层盒子,背景色为进度条的颜色 leftBox/rightBox:半宽等长 左/右浮动的盒子,背景色为灰色 roundMask:居中的盒子 用来遮盖leftBox和rightBox ...

  3. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  4. CSS3实现圆形进度条

    介绍 闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条.粗略看了下代码,发现原理其实很简单,不难理解. 现在在此讲述下原理并实现一个1s更新的进度条. 技术细节 ...

  5. css3 制作圆环进度条

    引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...

  6. CSS3制作同心圆进度条

    1.css代码 此处在制作进度条时,是旋转进度条的半圆(红色),背景使用灰白(如果使用红色作为背景,旋转灰白遮罩,在浏览器中可能会有渲染bug) .wrapper{ display:block;pos ...

  7. 纯CSS实现圆形进度条

    CSS的优点在于的可以随意组合HTML元素来实现许多中效果,这儿我将使用CSS来实现一个运行进度条,效果如下: 思路是用两个div来作为进度条外观,表示进度的div和外面div宽度和高度保持一致,并是 ...

  8. 用HTML、CSS、JS制作圆形进度条（无动画效果）

    逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果:   然后我们再用一个比底圆小的圆去覆盖这个大 ...

  9. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

随机推荐

  1. java读取 500M 以上文件,java读取大文件

    java 读取txt,java读取大文件 设置缓存大小BUFFER_SIZE ,Config.tempdatafile是文件地址 来源博客http://yijianfengvip.blog.163.c ...

  2. Python循环加强版——列表生成式

    记得我们在其他语言中都学到过循环,尤其是对for循环是再熟悉不过了 比如我有一个数组  a[10]={1,2,3,4,5,6,7,8,9,10} 下面需要依次循环打印出来,C语言首先想到的是 for( ...

  3. NOIP2018初赛总结(提高组)（试题+答案+简要解析）

    NOIP2018初赛总结(提高组) 更新完毕(纯手敲),如果有错误请在下面留言 单选题 T1.下列四个不同进制的数中,与其它三项数值上不相等的是 A.\((269)_{16}\) B.\((617)_ ...

  4. 【转】C#中HttpWebRequest的GetRequestStream执行的效率太低，甚至偶尔死掉

    http://www.cnblogs.com/summer_adai/archive/2013/04/26/3045261.html

  5. 河南省第十一届ACM程序设计竞赛 修路

    Problem C: 修路 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 63  Solved: 22[Submit][Status][Web Boar ...

  6. Python集合字典运算符

    1.集合2.字典3.运算符优先级 1.集合 创建:{} set([]) 注意:创建空的集合要用set()   特点:元素唯一,无序   运算: & 交集 | 并集 - 差集   方法:   s ...

  7. 【bzoj2935】[Poi1999]原始生物

    2935: [Poi1999]原始生物 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 145  Solved: 71[Submit][Status][D ...

  8. Python读写操作Excel模块_xlrd_xlwt_xlutils

    Python 读写操作Excel -- 安装第三方库(xlrd.xlwt.xlutils.openpyxl) 如果仅仅是要以表单形式保存数据,可以借助 CSV 格式(一种以逗号分隔的表格数据格式)进行 ...

  9. Django易混淆问题

    1.Django本身提供了runserver 为什么不能用来 部署 runserver 方法是调试 Django 时经常用到的运行方式,它使用 Django 自带的  WSGI Server 运行,主 ...

  10. hadoop用put上传文件时报错

    用命令-put上传文件 报错0 datanode(s) running 原因是进行了多次格式化 解决办法: 停止集群 删除在hdfs中配置的data目录(即在core-site.xml中配置的hado ...