溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹怎么使用純css代碼實(shí)現(xiàn)賽車的loader動(dòng)畫效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
代碼解讀
定義dom，容器中包含1個(gè).car元素，它的2個(gè)子元素分別代表車身和車輪：
<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;
}
?。ㄟ@時(shí)看起來(lái)有點(diǎn)兒像飛機(jī)，哈哈~~）
畫出車身：
.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%
);
}
把車輪定位到左右兩側(cè)：
.wheels::before{
left:1.2em;
}
.wheels::after{
right:0.8em;
}
接下來(lái)制作動(dòng)畫效果。
增加表示風(fēng)影的dom元素.strikes，它包含5個(gè)子元素：
<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段短細(xì)線：
.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;
}
增加風(fēng)影飄逝的動(dòng)畫效果，定義css變量，設(shè)置動(dòng)畫延時(shí)：
.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;
}
增加輪子轉(zhuǎn)動(dòng)動(dòng)畫效果：
.wheels::before,
.wheels::after{
animation:rotating0.5slinearinfinite;
}
@keyframesrotating{
to{
transform:rotate(1turn);
}
}
增加車身顛簸的動(dòng)畫效果：
.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代碼實(shí)現(xiàn)賽車的loader動(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)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
