近日在开发的页面中，需要制作一个动态的圆形进度条，首先想到的是利用两个矩形，宽等于直径的一半，高等于直径，两个矩形利用浮动贴在一起，设置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. JBOSS在win7环境下启动run.bat无反应

    今天从隔壁机器拷贝了一份Jboss,却发现启动无任何反应. 仔细对比了jdk jboss的各项参数发现都是相同,无奈之下,检查run.bat文件 发现时在此句出现前后 无反应: "%JAVA ...

  2. CI框架源码学习笔记7——Utf8.php

    愉快的清明节假期结束了,继续回到CI框架学习.这一节我们来看看Utf8.php文件,它主要是用来做utf8编码,废话不多说,上代码. class CI_Utf8 { /** * Class const ...

  3. plsql查询结果中文乱码

    网上的教程很多,但是这里需要说明的是如果没有安装oracle客户端的情况下,该怎么修改注册表里面的oracle参数呢? 当然有些是不需要改注册表的,只需要配置环境变量就可以了,但是有的时候发现改了之后 ...

  4. 剑指offer —— 替换空格

    1.问题:请实现一个函数,将一个字符串中的空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 2.思路:可能首先想到的应该就是 ...

  5. 华为敏捷/DevOps实践：如何开好站立会议

    大家好,我是华为云的产品经理 恒少: 作为布道师和产品经理,出差各地接触客户是常态,经常和华为云的客户交流.布道.技术沙龙,但是线下交流,覆盖的用户总还是少数. 我希望可以借线上的平台,和用户持续交流 ...

  6. 「洛谷P3768」简单的数学题 莫比乌斯反演+杜教筛

    题目链接 简单的数学题 题目描述 输入一个整数n和一个整数p,你需要求出 \[\sum_{i=1}^n\sum_{j=1}^n (i\cdot j\cdot gcd(i,j))\ mod\ p\]  ...

  7. 使用js实现水波效果

    使用到的工具:jQuery Ripples Plugin 下载安装 git clone https://github.com/sirxemic/jquery.ripples.git 引入jquery, ...

  8. sharepoint_study_11

    描述:修改管理员密码和账户后,管理中心无法打开.(提示:HTTP Error 503. The service is unavailable.) 解决: 1.打开iis 2.右击“应用程序池”下的”S ...

  9. C#空接合操作符——??

    操作符: ?? 用法:C = A ?? B; 解释:if(A != null){ C=A;} else{C=B}     类似三元运算符 :? 例子: Int32? num1=null; Int32? ...

  10. dropzone手动上传

    html: <div class="field"> <div id="file" class="dropzone"> ...