自從CSS3流行以來，基于純CSS3的動畫就層出不窮，有純CSS3的人物動畫、純CSS3按鈕動畫等。這次，我們給大家分享一個很不錯的CSS3卡通火車沿軌道行駛動畫，一輛卡通樣式的火車緩緩馳過，特別是火車頭的動畫設計，非常可愛和逼真。

堅守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價值觀，專業(yè)網站建設服務10余年為成都成都攪拌罐車小微創(chuàng)業(yè)公司專業(yè)提供成都企業(yè)網站定制營銷網站建設商城網站建設手機網站建設小程序網站建設網站改版，從內容策劃、視覺設計、底層架構、網頁布局、功能開發(fā)迭代于一體的高端網站建設服務。

效果預覽

代碼實現

HTML代碼

<divclass="center">
  <divclass="mountains">div>
  <divclass="train">
    <divclass="engine-front">
      <divclass="chimney">
        <divclass="smoke">div>
        <divclass="smoke smoke-2">div>
        <divclass="smoke smoke-3">div>
        <divclass="smoke smoke-4">div>
      div>
    div>
    
    <divclass="engine-body">div>
    
    <divclass="compartment">
      <divclass="compartment-window">div>
    div>
    
    <divclass="compartment compartment-two">
      <divclass="compartment-window">div>
    div>
    
    <divclass="compartment compartment-three">
      <divclass="compartment-window">div>
    div>
    
    <divclass="wheel-holder">
      <divclass="wheel">div>
      <divclass="wheel wheel-2">
        <divclass="wheel-joint">div>
        <divclass="wheel-joint wheel-joint-2">div>
      div>
      <divclass="wheel wheel-3">div>
      <divclass="wheel wheel-4">div>
      <divclass="wheel wheel-5">div>
      <divclass="wheel wheel-6">div>
      <divclass="wheel wheel-7">div>
      <divclass="wheel wheel-8">div>
      <divclass="wheel wheel-9">div>
    div>
  div>
  <divclass="bridge">div>
div>