css+js写环形进度条（canvas画出来在真机上显示有诸多问题）

最新推荐文章于 2021-08-29 21:54:40 发布

红孩儿2011

最新推荐文章于 2021-08-29 21:54:40 发布

阅读量253

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_26642611/article/details/108381829

版权

由于小程序用到的环形进度条，用canvas画的话有很多问题，如：
1、不能同层渲染
2、绘制画面不能随着滚动条而改变位置
所以最后还是得采取css+js方式写改效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆环运动</title>
    <style>
        .cirqueBox{
            position: relative;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            -webkit-mask: radial-gradient(transparent, transparent 60px, #000 0);
            mask: radial-gradient(transparent 60px, #000 0);
        }
        .cirqueRed{
            position: absolute;
            width:100%;
            height: 100%;
            left:0;
            top:0;
            background-color:#e31514;
            z-index: 1;
        }
        .cirqueGrey{
            position: absolute;
            width:100%;
            height: 100%;
            left:0;
            top:0;
            background-color:#aaa;
            z-index: 2;
        }
        @keyframes mymove
        {
            0%   {
                clip-path: polygon(70px 70px, 70px -300px, -300px 70px, 70px 440px, 440px 70px, 70px -300px);
            }
            25%   {
                clip-path: polygon(70px 70px, 70px -300px, -300px 70px, 70px 440px, 440px 70px, 440px 70px);
            }
            50%   {
                clip-path: polygon(70px 70px, 70px -300px, -300px 70px, 70px 440px, 70px 440px, 70px 440px);
            }
            75%   {
                clip-path: polygon(70px 70px, 70px -300px, -300px 70px, -300px 70px, -300px 70px, -300px 70px);
            }
            100%   {
                clip-path: polygon(70px 70px, 70px -300px, 70px -300px, 70px -300px, 70px -300px, 70px -300px);
            }
        }
    </style>
</head>
<body>
    <div class="cirqueBox">
        <div class="cirqueRed"></div>
        <div class="cirqueGrey" id="circleAnimate"></div>
    </div>

    <script>
     document.getElementById('circleAnimate').style.animation="mymove 4.5s linear 1"
     document.getElementById('circleAnimate').style.animationFillMode="forwards"
     //以上两个顺序不能变，否则结束时动画状态不能为预期效果
    </script>
</body>
</html>

红孩儿2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css+js写环形进度条（canvas画出来在真机上显示有诸多问题）

由于小程序用到的环形进度条，用canvas画的话有很多问题，如：1、不能同层渲染2、绘制画面不能随着滚动条而改变位置所以最后还是得采取css+js方式写改效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圆环运动</title> <style> .cirqueBox{
复制链接

扫一扫