小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

绘制

loding...效果是我们在项目中经常用到的，这篇文章我们写一个过山车的加载中效果。实现的思路是：需要一个圆、一条线、三个点，然后点围绕圆转一圈后从线的另一端移出。

容器

<div class="container">
    <span></span>
    <span></span>
    <span></span>
</div>

绘制过山车的元素准备如上，接下来就是它的变身时刻。

样式

通用样式

给整体的demo一个通用的样式，此操作可以忽略。

*{
    margin: 0;
    padding: 0;
}

html,body{
    height: 100%;
}

过山车所处的容器

给过山车所处的容器一个背景色以及所在demo的样式，实际使用中，可能会要进行微调整。

.container{
    width: 600px;
    height: 400px;
    background:linear-gradient(to right,darkcyan,teal);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);  
}

圆圈和下划线

这一步是为了画一个车的运行轨道，一个圆圈加一条直线。

共有样式

.container::after,.container::before{
    content: "";
    position: absolute;
    transform: translate(-50%);
    left: 50%;
}

圆圈

.container::before{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid white;
    top: 100px;
}

下划线

.container::after{
    width: 400px;
    height: 2px;
    background-color: white;
    top: 302px;
}

效果如下：

点

这一步就是运行的三个点，可以理解为是“车”，另外还要给他们加上动画效果。

.container span{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    display: inline-block;
    position: absolute;
    top: 287px;
    left: 17%;
    transform-origin: 50% -86px;
    animation: run 4s linear infinite;
    animation-delay: var(--n);
}

给三个点增加动画效果：

.container span:nth-child(1){
    --n:0;
}

.container span:nth-child(2){
    --n:0.25s;
}

.container span:nth-child(3){
    --n:0.5s;
}

/* 动画 */
@keyframes run{
    0%{
        left: 17%;
        transform: rotate(0);
    }
    25%{
        left: 49%;
        transform: rotate(0);
    }
    75%{
        left: 49%;
        transform: rotate(-1turn);
    }
    100%{
        left: 81%;
        transform: rotate(-1turn);
    }
}

最终效果

过山车的运动轨迹动画效果查看：过山车

总结

这是一个loading...的demo效果，大家可以修改一下，改成自适应的，可以自动适应你的每一个项目。

想了解其他动画效果，请前往《有趣的动画》 专栏，希望对你有所帮助。