怎么使用純CSS實(shí)現(xiàn)菱形loader效果?這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
成都創(chuàng)新互聯(lián)主營甘井子網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件定制開發(fā),甘井子h5小程序開發(fā)搭建,甘井子網(wǎng)站營銷推廣歡迎甘井子等地區(qū)企業(yè)咨詢效果預(yù)覽源代碼下載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è)置時(shí)延,增強(qiáng)動感:
.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實(shí)現(xiàn)菱形loader效果大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。
本文題目:怎么使用純CSS實(shí)現(xiàn)菱形loader效果-創(chuàng)新互聯(lián)
本文鏈接:http://muchs.cn/article6/cdopog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、ChatGPT、網(wǎng)站策劃、軟件開發(fā)、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容