簡(jiǎn)要教程

這是一款使用純CSS3制作的逼真汽車運(yùn)動(dòng)動(dòng)畫特效。該特效中，所有元素都是通過CSS渲染得到的，沒有使用任何圖片。它通過公路斑馬線的左右晃動(dòng)來制作出汽車運(yùn)動(dòng)的視覺效果。

使用方法

HTML結(jié)構(gòu)

整個(gè)汽車運(yùn)動(dòng)動(dòng)畫的HTML結(jié)構(gòu)如下：

CSS樣式

CSS樣式中主要通過各個(gè)汽車組件的:before和:after偽元素來構(gòu)造汽車。整個(gè)特效使用了4個(gè)animation動(dòng)畫，分別是：shine前擋風(fēng)玻璃的流光動(dòng)畫，suspension車身左右搖晃動(dòng)畫，lane公路左右移動(dòng)動(dòng)畫和steer車道斑馬線動(dòng)畫。@keyframes shine{

0%,80%,100%{

-webkit-transform:translateX(-55px) rotate(24deg);

transform:translateX(-55px) rotate(24deg);

}

5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{background-color:#2d2d2d}

0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{background-color:#4d4d4d}

33%,44%{

-webkit-transform:translateX(30px) rotate(-14deg);

transform:translateX(30px) rotate(-14deg);

}

66%{

-webkit-transform:translateX(0px) rotate(-10deg);

transform:translateX(0px) rotate(-10deg);

}

}

@keyframes lane{

0%{

-webkit-transform:translateY(320px);

transform:translateY(320px);

}

100%{

-webkit-transform:translateY(-160px);

transform:translateY(-160px);

}

}

@keyframes steer{

0%,100%{

-webkit-transform:translateX(-15px) rotate(5deg);

transform:translateX(-15px) rotate(5deg);

}

50%{

-webkit-transform:translateX(15px) rotate(-5deg);

transform:translateX(15px) rotate(-5deg)

}

}

@keyframes suspension{

0%,75%,100%{

-webkit-transform:rotate(3deg);

transform:rotate(3deg)

}

10%,30%,50%,70%,90%{top:0}

20%,40%,60%,80%,100%{top:-1px}

25%,50%{

-webkit-transform:rotate(-3deg);

transform:rotate(-3deg)

}

20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}

90%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}

}

以上就是純CSS3制作逼真的汽車運(yùn)動(dòng)動(dòng)畫的內(nèi)容，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)(www.gxlcms.com)！

總結(jié)

以上是生活随笔為你收集整理的css3蒙版运动,纯CSS3制作逼真的汽车运动动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。