这篇文章主要介绍了关于如何使用css实现单元素点阵loader的效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
![2332658444-5b3970f833113_articlex[1].png](https://img.php.cn//upload/image/917/782/918/1531214331155741.png "1531214331155741.png")
源代码下载
每日前端实战系列的全部源代码请从 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中文网！
相关推荐：
