使用CSS3写圆环加载动画

最新推荐文章于 2024-07-24 10:22:02 发布

IM_啦

最新推荐文章于 2024-07-24 10:22:02 发布

阅读量5.4k

点赞数

分类专栏：前端技术文章标签： web前端 css3圆弧运动

本文链接：https://blog.csdn.net/u010837861/article/details/83412736

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一次在CSDN写文章，请各位看客将就哦，如有哪里不足请尽管提，本人会有责改之哒~

功能介绍：
红色沿着灰色环运动，并填满。如下图：

实现技术点：
1.先画两个圆，一个灰色，一个红色;
2.使用样式遮罩mask的 radial-gradient把圆的中间截掉，并且截掉的部分是透明的，最终成环；
3.对灰色圆使用clip-path: polygon(point1,point2,point3,point4,point5,pointOther)剪切区域，这里的裁剪类似扇形（裁剪半径要尽可能的长，本人这里用了370）。开始时，主要是找好五个点，并排好顺序，然后第六个点一开始就是第二给点。如下图：
在这里插入图片描述

直接贴代码吧，有些兼容性就不写，自行补充，先这样！

<!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;
            animation:mymove 1.5s linear infinite;
        }
        @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"></div>
    </div>
</body>
</html>