持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

在项目中我们会经常用到loading效果，今天就来做一个类似牛角的loading效果。其实，之前已经做个一个过山车loading，详情查看（五）巧用CSS3之过山车

多彩牛角loading

利用CSS画出类似牛角的形状，然后让它旋转的过程中变色，就形成了一个多彩的牛角loading了。

结构

实现这个效果，一个元素就搞定了，如下：

<div class="loading"></div>

样式

首先，我们要使用渐变色让loading的背景由虚到实，如下：

.loading {
    --h: 5rem;
    width: calc(var(--h) * 2);
    height: var(--h);
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    background: linear-gradient(to right, transparent, cyan);
    position: relative;
}

然后，我们利用loading的伪元素before，与其错位形成牛角的形状，如下：

.loading::before {
    content: '';
    width: 80%;
    height: 80%;
    position: absolute;
    left: 5%;
    bottom: 0;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    background: #000;
}

接下来，，我们利用loading的伪元素after让这个形状更有感觉，更像一个立体的牛角，如下：

 .loading::after {
    content: '';
    width: 15%;
    height: 30%;
    border-radius: 50%;
    background: cyan;
    position: absolute;
    right: 0;
    bottom: -15%;
    box-shadow: 0 0 0.2rem #000 inset;
}

我们也可以把它想象成一个电缆，一个圆环轨道。

最后，给loading加上动画就完成了，如下：

.loading {
    transform-origin: center bottom;
    animation: _animate 2s linear infinite;
}
@keyframes _animate {
    100% {
        filter: hue-rotate(360deg);
        transform: rotate(360deg);
    }
}

效果

效果及代码详情如下：

总结

loading的效果真的是有很多种，大家可以尝试各种的loading效果，每天多前行一步，积少成多，就算是一种大收获。

本是平面的效果，但是使用阴影及错位结合，就可以呈现出立体的感觉，希望能对小伙伴有所帮助。