如何使用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;}

大功告成！

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！