如何使用CSS實現貨車loader的效果

來源：懂視網責編：小采時間：2020-11-27 18:47:39

如何使用CSS實現貨車loader的效果

如何使用CSS實現貨車loader的效果:本篇文章給大家帶來的內容是關于如何使用CSS實現貨車loader的效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。效果預覽代碼解讀定義 dom，容器代表卡車，包含的 2 個子元素代表車頭和尾氣；<hr> 代表道路：<div cl

推薦度：

點擊下載本文 文檔為doc格式

導讀如何使用CSS實現貨車loader的效果:本篇文章給大家帶來的內容是關于如何使用CSS實現貨車loader的效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。效果預覽代碼解讀定義 dom，容器代表卡車，包含的 2 個子元素代表車頭和尾氣；<hr> 代表道路：<div cl

本篇文章給大家帶來的內容是關于如何使用CSS實現貨車loader的效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

效果預覽

代碼解讀

定義 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;
}

畫出尾氣的初始狀態：

.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實現貨車loader的效果

推薦度：

點擊下載本文 文檔為doc格式

標簽：如何用使用實現

熱門焦點

如何使用CSS實現貨車loader的效果

如何使用CSS實現貨車loader的效果

如何使用CSS實現貨車loader的效果

最新推薦

猜你喜歡

熱門推薦