溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹怎么使用純css代碼實現賽車的loader動畫效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
代碼解讀
定義dom，容器中包含1個.car元素，它的2個子元素分別代表車身和車輪：
<figureclass="loader">
<divclass="car">
<spanclass="body"></span>
<spanclass="wheels"></span>
</div>
</figure>
居中顯示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:#333;
}
定義容器尺寸和車的顏色：
.loader{
width:11.7em;
height:4.2em;
color:lightcyan;
position:relative;
}
畫出底盤：
.car{
position:absolute;
width:inherit;
height:2em;
background-color:currentColor;
top:1.5em;
border-radius:05em1em0/04em1em0;
}
畫出尾冀：
.car::before{
content:'';
position:absolute;
width:0;
height:0;
border:0.6emsolidtransparent;
border-left-width:0;
border-right-color:currentColor;
transform-origin:left;
transform:rotate(-45deg);
top:-0.5em;
}
（這時看起來有點兒像飛機，哈哈~~）
畫出車身：
.body{
position:absolute;
width:7.5em;
height:3.5em;
box-sizing:border-box;
border:0.4emsolid;
border-radius:3em4.5em00/3em4em00;
top:-1.5em;
left:1.2em;
}
用偽元素畫出車窗：
.body::before{
content:'';
position:absolute;
width:3.5em;
height:inherit;
background-color:currentColor;
border-top-left-radius:inherit;
left:-0.4em;
top:-0.4em;
}
畫出車輪的輪廓：
.wheels::before,
.wheels::after{
content:'';
position:absolute;
box-sizing:border-box;
width:2.6em;
height:2.6em;
background-color:#333;
border-radius:50%;
bottom:-1em;
}
畫出輪轂：
.wheels::before,
.wheels::after{
border:0.3emsolid#333;
background-image:
linear-gradient(
135deg,
transparent45%,
currentColor46%,currentColor54%,
transparent55%
),
linear-gradient(
90deg,
transparent45%,
currentColor46%,currentColor54%,
transparent55%
),
linear-gradient(
45deg,
transparent45%,
currentColor46%,currentColor54%,
transparent55%
),
linear-gradient(
0deg,
transparent45%,
currentColor46%,currentColor54%,
transparent55%
),
radial-gradient(
currentColor29%,
transparent30%,transparent50%,
currentColor51%
);
}
把車輪定位到左右兩側：
.wheels::before{
left:1.2em;
}
.wheels::after{
right:0.8em;
}
接下來制作動畫效果。
增加表示風影的dom元素.strikes，它包含5個子元素：
<figureclass="loader">
<pclass="car">
<spanclass="body"></span>
<spanclass="wheels"></span>
</p>
<pclass="strikes">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</figure>
畫出5段短細線：
.strikes{
position:absolute;
width:1em;
height:inherit;
border:1pxdashedwhite;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.strikesspan{
height:0.1em;
background-color:lightcyan;
}
增加風影飄逝的動畫效果，定義css變量，設置動畫延時：
.strikesspan{
animation:drift0.2slinearinfinite;
animation-delay:calc((var(--n)-1)*0.05s);
}
@keyframesdrift{
from{
transform:translate(3.5em);
}
to{
transform:translate(-8em);
filter:opacity(0);
}
}
.strikesspan:nth-child(1){
--n:1;
}
.strikesspan:nth-child(2){
--n:2;
}
.strikesspan:nth-child(3){
--n:3;
}
.strikesspan:nth-child(4){
--n:4;
}
.strikesspan:nth-child(5){
--n:5;
}
增加輪子轉動動畫效果：
.wheels::before,
.wheels::after{
animation:rotating0.5slinearinfinite;
}
@keyframesrotating{
to{
transform:rotate(1turn);
}
}
增加車身顛簸的動畫效果：
.car{
animation:run0.25slinearinfinite;
}
@keyframesrun{
0%{
transform:translate(0.2em,0.1em)rotate(0deg);
}
20%{
transform:translate(0.1em,0.2em)rotate(1deg);
}
40%{
transform:translate(0.1em,-0.1em)rotate(-1deg);
}
60%{
transform:translate(-0.1em,0.2em)rotate(0deg);
}
80%{
transform:translate(-0.1em,0.1em)rotate(1deg);
}
100%{
transform:translate(0.2em,0.1em)rotate(-1deg);
}
}
以上是“怎么使用純css代碼實現賽車的loader動畫效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
