HTML5+CSS3小实例：莫比乌斯环loading动画

实例：莫比乌斯环loading动画
技术栈：HTML+CSS
效果：

源码：
【html】

【css】

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
}
.loader{
    display: flex;
    justify-content: center;
    align-items: center;
    /* 相对定位 */
    position: relative;
    left: 15px;
}
.loader::before,
.loader::after{
    content: "";
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 15px solid #57606f;
    position: relative;
    z-index: -1;
}
.loader::after{
    left: -15px;
}
.loader div{
    width: 150px;
    height: 150px;
    /* 绝对定位 */
    position: absolute;
    left: 0;
    /* 利用clip-path的方式遮盖掉下半部分 */
    clip-path: polygon(0 0,100% 0,100% 50%,0 50%);
}
.loader div div{
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 15px;
    border-color: #ff6b81 #ff6b81 transparent transparent;
    border-radius: 50%;
    position: absolute;
    /* 默认旋转135度，让圆环处于遮盖处 */
    transform: rotate(135deg);
    /* 执行动画：动画名 时长 线性 无限播放 */
    animation: roll 4s linear infinite;
}
.rt,.rb{
    transform: translateX(calc(100% - 15px));
}
.lb{
    transform: scale(-1,-1);
}
.rt{
    transform: translateX(calc(100% - 15px)) scale(-1,1);
}
.rb{
    transform: translateX(calc(100% - 15px)) scale(1,-1);
}
/* 设置动画延迟 */
.loader .rb div{
    animation-delay: 1s;
}
.loader .rt div{
    animation-delay: 2s;
}
.loader .lb div{
    animation-delay: 3s;
}
 
/* 定义动画 */
@keyframes roll {
    50%,100%{
        transform: rotate(495deg);
    }
}