移动端纯CSS3制作圆形进度条所遇到的问题
近日在开发的页面中，需要制作一个动态的圆形进度条，首先想到的是利用两个矩形，宽等于直径的一半，高等于直径，两个矩形利用浮动贴在一起，设置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制作圆形进度条所遇到的问题的更多相关文章
- 纯CSS3实现圆形进度条动画
悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...
- 微信小程序纯css制作圆形进度条所遇到的问题
wrapBox:最外层盒子,背景色为进度条的颜色 leftBox/rightBox:半宽等长 左/右浮动的盒子,背景色为灰色 roundMask:居中的盒子 用来遮盖leftBox和rightBox ...
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- CSS3实现圆形进度条
介绍 闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条.粗略看了下代码,发现原理其实很简单,不难理解. 现在在此讲述下原理并实现一个1s更新的进度条. 技术细节 ...
- css3 制作圆环进度条
引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...
- CSS3制作同心圆进度条
1.css代码 此处在制作进度条时,是旋转进度条的半圆(红色),背景使用灰白(如果使用红色作为背景,旋转灰白遮罩,在浏览器中可能会有渲染bug) .wrapper{ display:block;pos ...
- 纯CSS实现圆形进度条
CSS的优点在于的可以随意组合HTML元素来实现许多中效果,这儿我将使用CSS来实现一个运行进度条,效果如下: 思路是用两个div来作为进度条外观,表示进度的div和外面div宽度和高度保持一致,并是 ...
- 用HTML、CSS、JS制作圆形进度条（无动画效果）
逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果: 然后我们再用一个比底圆小的圆去覆盖这个大 ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
随机推荐
- Codeforces Round #521 (Div. 3) C. Good Array
C. Good Array time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- kuangbin专题七 HDU1698 Just a Hook （区间设值 线段树）
In the game of DotA, Pudge’s meat hook is actually the most horrible thing for most of the heroes. T ...
- C#获取单元格值（使用NPOI插件）
/// <summary> /// 获取单元格的值 /// </summary> /// <param name="item"></par ...
- hdu1016 Prime Ring Problem(DFS)
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- day26 网络通讯的整个流程
一.网络通信原理 1. 互联网的本质就是一系列的网络协议 2. 互联网协议按照功能不同分为osi七层或tcp/ip五层或tcp/ip四层 各层的功能简述: [1]物理层:主要定义物理设备标准,如网 ...
- rhcs红帽插件及 轮循
server1:yum install luci ricci -yecho westos | passwd -stdin ricci/etc/init.d/ricci startchkconfig ...
- Jenkins自动化CI CD流水线之1--介绍与安装
第1章 大纲 CI/CD, DevOps介绍 Git安装与使用 Jenkins安装与使用 权限管理 参数化构建 Master-Slave 流水线(Pipeline) 邮件通知 应用案例 自动发布PHP ...
- select随笔
粘贴下面代码 select 美化 <!doctype html> <html lang="en"> <head> <meta charse ...
- 云数据库 Redis 缓存 PHP session 变量
1.安装 phpredis 扩展. wget https://github.com/nicolasff/phpredis/archive/master.zip unzip master.zip cd ...
- 3.Servlet(二)
1.Servlet应用开发接口 对Servlet应用开发接口及功能的掌握,决定了是否能做好Servlet开发工作. GenericServlet抽象类 HttpServlet抽象类 2.Servlet ...