移动端纯CSS3制做圆形进度条所遇到的问题

时间 2019-11-07

标签移动 css3 css 制做圆形进度遇到问题栏目无线繁體版

原文原文链接

本文转载于:猿2048网站移动端纯CSS3制做圆形进度条所遇到的问题php

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

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

　　而后咱们给两个半圆设置边框，而且左边的半圆的右边框设置为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”顺利解决了这个问题，起原理以下图（此图源自网络）
url

　　background：url("color.png");spa

　　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>