您好,登錄后才能下訂單哦!
這篇文章主要介紹純CSS如何實(shí)現(xiàn)心形加載動(dòng)畫,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .heart-loading { margin-top: 120px; width: 200px; height: 200px; } ul { list-style: none; display: flex; justify-content: space-between; width: 150px; height: 10px; /* 做心形和條形想法是一樣的,但是每條高度是不一樣的 */ } li { --count: 9; --rgb: calc(var(--index) / var(--count) * .5turn); /* 不能把這個(gè)延時(shí)設(shè)置的太慢.太慢就看不出來是心形了,同時(shí)調(diào)整延時(shí)和動(dòng)畫時(shí)長即可 */ --time: calc((var(--index) - 1) * 150ms); border-radius: 5px; width: 10px; height: 10px; background-color: #003BB3; /* 利用fiter函數(shù)可以讓顏色漸變會(huì)非常漂亮 */ filter: hue-rotate(var(--rgb)); /* 下邊這個(gè)是動(dòng)畫時(shí)長 */ animation-duration: 2.5s; animation-delay: var(--time); animation-iteration-count: infinite; } .line-1, .line-9 { animation-name: line-move-1; } .line-2, .line-8 { animation-name: line-move-2; } .line-3, .line-7 { animation-name: line-move-3; } .line-4, .line-6 { animation-name: line-move-4; } .line-5 { animation-name: line-move-5; } /* 對(duì)稱的動(dòng)畫要相同高度,這樣看出心形了 */ @keyframes line-move-1 { 0%, 10%, 90%, 100% { height: 10px; } 45%, 55% { height: 30px; transform: translate3d(0, -15px, 0); } } @keyframes line-move-2 { 0%, 10%, 90%, 100% { height: 10px; } 45%, 55% { height: 60px; transform: translate3d(0, -30px, 0); } } @keyframes line-move-3 { 0%, 10%, 90%, 100% { height: 10px; } 45%, 55% { height: 80px; transform: translate3d(0, -40px, 0); } } @keyframes line-move-4 { 0%, 10%, 90%, 100% { height: 10px; } 45%, 55% { height: 90px; transform: translate3d(0, -30px, 0); } } @keyframes line-move-5 { 0%, 10%, 90%, 100% { height: 10px; } 45%, 55% { height: 90px; transform: translate3d(0, -20px, 0); } } </style> </head> <body> <div class="heart-loading"> <ul> <li class="line-1" style="--index: 1"></li> <li class="line-2" style="--index: 2"></li> <li class="line-3" style="--index: 3"></li> <li class="line-4" style="--index: 4"></li> <li class="line-5" style="--index: 5"></li> <li class="line-6" style="--index: 6"></li> <li class="line-7" style="--index: 7"></li> <li class="line-8" style="--index: 8"></li> <li class="line-9" style="--index: 9"></li> </ul> </div> </body> </html>
css的基本語法是:1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成;2、選擇器通常是需要改變樣式的HTML元素;3、每條聲明由一個(gè)屬性和一個(gè)值組成;4、屬性和屬性值被冒號(hào)分隔開。
以上是“純CSS如何實(shí)現(xiàn)心形加載動(dòng)畫”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。