溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“CSS怎么實現(xiàn)貨車loader的效果”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“CSS怎么實現(xiàn)貨車loader的效果”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。
代碼解讀
定義dom，容器代表卡車，包含的2個子元素代表車頭和尾氣；<hr>代表道路：
<divclass="truck">
<spanclass="cab"></span>
<spanclass="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.1emsolidwhite;
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%00.4em0.4em;
}
.cab::before{
content:'';
position:absolute;
width:2em;
height:1.5em;
background-color:#333;
top:-1.5em;
right:0;
border-radius:100%000;
}
畫出車頭的車輪：
.cab::after{
content:'';
position:absolute;
box-sizing:border-box;
width:2em;
height:2em;
background-color:#444;
border:0.1emsolidwhite;
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-12sinfinite;
}
.smoke::before{
animation:smoke-22sinfinite;
}
.smoke::after{
animation:smoke-32sinfinite;
}
@keyframessmoke-1{
to{
width:3em;
height:3em;
right:-3em;
bottom:0.5em;
}
}
@keyframessmoke-2{
to{
width:2.5em;
height:2.5em;
right:-6em;
bottom:0.8em;
}
}
@keyframessmoke-3{
to{
width:3.5em;
height:3.5em;
right:-4em;
bottom:0.2em;
}
}
增加尾氣的飄散效果：
.smoke{
animation:
drift2sinfinite,
smoke-12sinfinite;
}
.smoke::before{
animation:
drift3sinfinite,
smoke-23sinfinite;
}
.smoke::after{
animation:
drift4sinfinite,
smoke-34sinfinite;
}
@keyframesdrift{
0%,100%{
filter:opacity(0);
}
15%{
filter:opacity(0.9);
}
}
增加卡車行駛的動畫效果：
.truck{
animation:
move5sinfinite;
}
@keyframesmove{
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-put2sinfinite,
move10sinfinite;
}
@keyframesput-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;
}
}
1.行內(nèi)樣式，最直接最簡單的一種，直接對HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用
進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實用的樣式，只需要在之間加上
感謝您的閱讀，希望您對“CSS怎么實現(xiàn)貨車loader的效果”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領(lǐng)會，快去試試吧，如果想閱讀更多相關(guān)知識點的文章，歡迎關(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)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
