您好,登錄后才能下訂單哦!
小編給大家分享一下怎么使用CSS實現(xiàn)貨車loader的效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
效果預(yù)覽
代碼解讀
定義 dom,容器代表卡車,包含的 2 個子元素代表車頭和尾氣;<hr>
代表道路:
<div class="truck"> <span class="cab"></span> <span class="smoke"></span> </div> <hr>
居中顯示,同時道路與頁面之間留出空間:
body { margin: 10%; padding-top: 10%; }
畫出卡車車廂:
.truck { width: 15em; height: 5em; font-size: 10px; background-color: #444; border-radius: 0.4em; }
用偽元素畫出車廂的車輪:
.truck { position: relative; } .truck::before, .truck::after { content: ''; position: absolute; box-sizing: border-box; width: 2em; height: 2em; background-color: #444; border: 0.1em solid white; border-radius: 50%; bottom: -1em; } .truck::before { left: 0.6em; } .truck::after { right: 0.6em; }
畫出車頭:
.cab { position: absolute; width: 3.3em; height: 2.5em; background-color: #333; left: -3.5em; bottom: 0; border-radius: 40% 0 0.4em 0.4em; } .cab::before { content: ''; position: absolute; width: 2em; height: 1.5em; background-color: #333; top: -1.5em; right: 0; border-radius: 100% 0 0 0; }
畫出車頭的車輪:
.cab::after { content: ''; position: absolute; box-sizing: border-box; width: 2em; height: 2em; background-color: #444; border: 0.1em solid white; border-radius: 50%; bottom: -1em; left: 0.5em; }
畫出尾氣的初始狀態(tài):
.smoke, .smoke::before, .smoke::after { content: ''; position: absolute; width: 1em; height: 1em; background-color: #333; right: -0.1em; bottom: -0.5em; border-radius: 50%; }
增加排出尾氣的動畫:
.smoke { animation: smoke-1 2s infinite; } .smoke::before { animation: smoke-2 2s infinite; } .smoke::after { animation: smoke-3 2s infinite; } @keyframes smoke-1 { to { width: 3em; height: 3em; right: -3em; bottom: 0.5em; } } @keyframes smoke-2 { to { width: 2.5em; height: 2.5em; right: -6em; bottom: 0.8em; } } @keyframes smoke-3 { to { width: 3.5em; height: 3.5em; right: -4em; bottom: 0.2em; } }
增加尾氣的飄散效果:
.smoke { animation: drift 2s infinite, smoke-1 2s infinite; } .smoke::before { animation: drift 3s infinite, smoke-2 3s infinite; } .smoke::after { animation: drift 4s infinite, smoke-3 4s infinite; } @keyframes drift { 0%, 100% { filter: opacity(0); } 15% { filter: opacity(0.9); } }
增加卡車行駛的動畫效果:
.truck { animation: move 5s infinite; } @keyframes move { 0% { margin-left: 90%; } 50% { margin-left: 45%; } 100% { margin-left: 0; } 0%, 100% { filter: opacity(0); } 10%, 90% { filter: opacity(1); } }
增加卡片行駛中顛簸的動畫效果:
.truck { animation: put-put 2s infinite, move 10s infinite; } @keyframes put-put { 0% { margin-top: 0; height: 5em; } 5% { margin-top: -0.2em; height: 5.2em; } 20% { margin-top: -0.1em; height: 5em; } 35% { margin-top: 0.1em; height: 4.9em; } 40% { margin-top: -0.1em; height: 5.1em; } 60% { margin-top: 0.1em; height: 4.9em; } 75% { margin-top: 0; height: 5em; } 80% { margin-top: -0.4em; height: 5.2em; } 100% { margin-top: 0.1em; height: 4.9em; } }
以上是怎么使用CSS實現(xiàn)貨車loader的效果的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。