如何使用CSS实现单元素点阵loader的效果

这篇文章主要介绍了关于如何使用CSS实现单元素点阵loader的效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

源代码下载

每日前端实战系列的全部源代码请从 github 下载：

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，只有 1 个元素：

<p class="loader"></p>

居中显示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(darkgreen 30%, forestgreen);
}

定义容器尺寸：

.loader {
    width: 10em;
    height: 10em;
    font-size: 20px;
}

用 box-shadow 画出 2 组点阵：

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    box-shadow:
        0 0, 2em 0, 4em 0, 6em 0,
        0 2em, 2em 2em, 4em 2em, 6em 2em,
        0 4em, 2em 4em, 4em 4em, 6em 4em,
        0 6em, 2em 6em, 4em 6em, 6em 6em;
    border-radius: 50%;
}

.loader::before {
    color: gold;
}

.loader::after {
    color: dodgerblue;
}

定义动画：

@keyframes round {
    0% {
        transform: translateX(0) translateY(0);
    }

    25% {
        transform: translateX(3em) translateY(0);
    }

    50% {
        transform: translateX(3em) translateY(3em);
    }

    75% {
        transform: translateX(0) translateY(3em);
    }
}

最后，把动画效果应用到点阵上：

.loader::before,
.loader::after {
    animation: round 2s ease infinite;
}

.loader::after {
    animation-delay: -1s;
}

大功告成！

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

通过CSS Animation进行前端动效

如何用纯CSS 实现一个颜色卡的效果

Atas ialah kandungan terperinci 如何使用CSS实现单元素点阵loader的效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!