【每日一練】31—CSS 實(shí)現(xiàn)一個(gè)彩色旋轉(zhuǎn)方塊loading動(dòng)畫效果
寫在前面
今天練習(xí)的這個(gè)項(xiàng)目是一個(gè)加載動(dòng)畫，這個(gè)加載動(dòng)畫主要是為了在網(wǎng)絡(luò)不好，頁(yè)面加載緩慢時(shí)給用戶的一個(gè)提示，一個(gè)好的加載動(dòng)畫，可以緩解用戶的焦慮情緒，讓等待變得有趣，現(xiàn)在很多產(chǎn)品也越來(lái)越注重這一塊的設(shè)計(jì)了，因此，我們?cè)谥耙卜窒砹撕芏嗪芏嗟募虞d動(dòng)畫效果。
而我們今天練習(xí)的這個(gè)項(xiàng)目，非常簡(jiǎn)單，最終效果請(qǐng)看下面動(dòng)畫截圖：
<html><head><meta charset="utf-8"><title>【每日一練】31—CSS 實(shí)現(xiàn)一個(gè)彩色旋轉(zhuǎn)方塊動(dòng)畫效果</title></head><body><section><div class="loader"><div></div><div></div><div></div><div></div></div></section></body></html>
*{margin: 0;padding: 0;box-sizing: border-box;}section{display: flex;justify-content: center;align-items: center;min-height: 100vh;animation: changeBgColor 4s steps(1) infinite;}@keyframes changeBgColor{0%{background: #ff0;}25%{background: #0f0;}50%{background: #ff4786;}75%{background: #2da2ff;}100%{background: #ff0;}}.loader{position: relative;width: 50px;height: 50px;background: #000;animation: rotate 1s linear infinite;}.loader div{position: absolute;width: 100%;height: 100%;background: #000;animation: animate 1s linear infinite;}@keyframes animate{0%{transform: rotate(0deg);}50%,100%{transform: rotate(180deg);}}@keyframes rotate{0%{transform: rotate(90deg);}50%,100%{transform: rotate(0deg);}}.loader div:nth-child(1){top: -100%;left: -2px;transform-origin: bottom right;}.loader div:nth-child(1)::before{background: #ff0;}.loader div:nth-child(2){right: -100%;top: -2px;transform-origin: bottom left;}.loader div:nth-child(2)::before{background: #0f0;}.loader div:nth-child(3){bottom: -100%;left: 2px;transform-origin: top left;}.loader div:nth-child(3)::before{background: #ff4786;}.loader div:nth-child(4){left: -100%;top: 2px;transform-origin: top right;}.loader div:nth-child(4)::before{background: #2da2ff;}.loader:before,.loader div::before{content: '';position: absolute;top: 2px;left: 2px;right: 2px;bottom: 2px;background: #fff;}
寫在最后
以上就是我們今天【每日一練】的全部?jī)?nèi)容，希望今天的小練習(xí)對(duì)你有用，如果你覺得有幫助的話，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
評(píng)論
圖片
表情