loading动画（非gif）

原创于 2017-07-19 23:17:22 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现的加载动画，通过box-shadow属性配合关键帧动画来创建旋转的四色边框效果，适用于减轻服务端压力的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

降低服务压力，不用gif，纯css加动画，主要是box-shadow，外面的四色边框加个动画也可以转起来。生产环境中用js做dom操作即可

<div class="small">
    <div></div>
</div>

/*p138*/
.small div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 4px;
    height: 4px;
    border-radius: 2px;
    /*水平、垂直、模糊距离、阴影尺寸*/
    box-shadow: 0 -12px 0 2px red,
    0 12px 0 1px #333,
    -12px 0 0 1px #333,
    -9px -9px 0 1px #333,
    9px -9px 0 2px #333,
    -9px 9px 0 1px #333,
    9px 9px 0 1px #333;
    /*keyframe 名称/完成动画所花费的时间/速度/启动时间/是否应该轮流反向播放动画*/
    animation:loading 1.2s linear 0s infinite;
}
@keyframes loading {
    /*角度*/
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@keyframes foxfire {
    /*角度*/
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}