又一个css3 loading 打转的圆

前端入坑纪 52

上回写过一篇《一直打转的圆圈》的css3 loading 效果，用的是障眼法.
今天来分享真正的环形圆圈来做, 其实是border啦,哈哈

好，详解如下！

OK，first things first！ github项目地址

你就是个圆

HTML 结构

<div class="circle"></div>

就是只用一个div, 任性不, O(∩_∩)O哈哈~

CSS 结构

body{
        background-color: aliceblue;
        }
    .circle{
        border: 8px solid rgba(218, 141, 218, 0.5);
        border-radius: 50%;
        position: relative;
        width: 0;
        height: 0;
        padding: 25%;
        margin:22% auto;
    }
    .circle::after{
        content: "";
        display: block;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        position:absolute;
        top: -8px;
        left: -8px;
        border: 8px solid;
        border-color: transparent;
        border-left-color:yellow;
        animation:roller 2s infinite linear;
    }
    @keyframes roller {
            0%{
                transform:rotateZ(0)
            }
            100%{
                transform:rotateZ(360deg)
            }
        }

简单阐述下原理:
1.首先div.circle, 用padding撑开成正方形,然后用border-radius:50%变成圆形.
2.同样把div.circle::after这个伪元素也做成圆形.
3.使用绝对定位,让两个圆重叠, 只给边框加不同颜色,以此区别.
4.给伪元素添加animation的动画, 大功告成!
Ps: 由于是用border来模拟环形,所以这个效果的缺陷就是圆弧的长度只能限制在1/4, 2/4, 3/4圆

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包