您好,登錄后才能下訂單哦!
怎么使用純CSS實現(xiàn)菱形loader效果?這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
https://github.com/comehope/front-end-daily-challenges
定義 dom,一個容器中包含 9 個子元素:
<div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
定義容器和子元素尺寸,是一個大正方形里包含 9 個小正方形:
.loader { width: 10em; height: 10em; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.5em; }
把圖案調(diào)整為大菱形中包含 9 個小菱形:
.loader { transform: rotate(45deg); }
以豎向的小菱形為單位,為小菱形塊上色:
.loader span { background-color: var(--c); } .loader span:nth-child(7) { --c: tomato; } .loader span:nth-child(4), .loader span:nth-child(8) { --c: gold; } .loader span:nth-child(1), .loader span:nth-child(5), .loader span:nth-child(9) { --c: limegreen; } .loader span:nth-child(2), .loader span:nth-child(6) { --c: dodgerblue; } .loader span:nth-child(3) { --c: mediumpurple; }
定義動畫效果:
.loader span { animation: blinking 2s linear infinite; animation-delay: var(--d); transform: scale(0); } @keyframes blinking { 0%, 100% { transform: scale(0); } 40%, 80% { transform: scale(1); } }
最后,為小菱形設(shè)置時延,增強動感:
.loader span:nth-child(7) { --d: 0s; } .loader span:nth-child(4), .loader span:nth-child(8) { --d: 0.2s; } .loader span:nth-child(1), .loader span:nth-child(5), .loader span:nth-child(9) { --d: 0.4s; } .loader span:nth-child(2), .loader span:nth-child(6) { --d: 0.6s; } .loader span:nth-child(3) { --d: 0.8s; }
感謝各位的閱讀!看完上述內(nèi)容,你們對怎么使用純CSS實現(xiàn)菱形loader效果大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。