图片/图形

纯CSS3制作逼真的汽车运动动画

阿里云


这是一款使用纯 CSS3 制作的逼真汽车运动动画特效。该特效中,所有元素都是通过 CSS 渲染得到的,没有使用任何图片。它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果。

HTML 结构

整个汽车运动动画的 HTML 结构如下:

也想出现在这里?联系我们
创客主机
  1. <div class="car">
  2.   <div class="body">
  3.     <div class="mirror-wrap">
  4.       <div class="mirror-inner">
  5.         <div class="mirror">
  6.           <div class="shine"></div>
  7.         </div>
  8.       </div>
  9.     </div>
  10.     <div class="middle">
  11.       <div class="top">
  12.         <div class="line"></div>
  13.       </div>
  14.       <div class="bottom">
  15.         <div class="lights">
  16.           <div class="line"></div>
  17.         </div>
  18.       </div>
  19.     </div>
  20.     <div class="bumper">
  21.       <div class="top"></div>
  22.       <div class="middle" data-numb="..."></div>
  23.       <div class="bottom"></div>
  24.     </div>
  25.   </div>
  26.   <div class="tyres">
  27.     <div class="tyre back"></div>
  28.     <div class="tyre front"></div>
  29.   </div>
  30. </div>
  31. <div class="road-wrap">
  32.   <div class="road">
  33.     <div class="lane-wrap">
  34.       <div class="lane">
  35.         <div></div>
  36.         <div></div>
  37.         <div></div>
  38.         <div></div>
  39.         <div></div>
  40.         <div></div>
  41.         <div></div>
  42.         <div></div>
  43.         <div></div>
  44.         <div></div>
  45.         <div></div>
  46.       </div>
  47.     </div>
  48.   </div>
  49. </div>

CSS 样式

CSS 样式中主要通过各个汽车组件的:before 和:after 伪元素来构造汽车。整个特效使用了 4 个 animation 动画,分别是:shine 前挡风玻璃的流光动画,suspension 车身左右摇晃动画,lane 公路左右移动动画和 steer 车道斑马线动画。

  1. @keyframes shine{
  2.   0%,80%,100%{
  3.     -webkit-transform:translateX(-55px) rotate(24deg);
  4.             transform:translateX(-55px) rotate(24deg);
  5.   }
  6.   5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{background-color:#2d2d2d}
  7.   0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{background-color:#4d4d4d}
  8.   33%,44%{
  9.     -webkit-transform:translateX(30px) rotate(-14deg);
  10.             transform:translateX(30px) rotate(-14deg);
  11.   }
  12.   66%{
  13.     -webkit-transform:translateX(0px) rotate(-10deg);
  14.             transform:translateX(0px) rotate(-10deg);
  15.   }
  16. }
  17. @keyframes lane{
  18.   0%{
  19.     -webkit-transform:translateY(320px);
  20.             transform:translateY(320px);
  21.   }
  22.   100%{
  23.     -webkit-transform:translateY(-160px);
  24.             transform:translateY(-160px);
  25.   }
  26. }
  27. @keyframes steer{
  28.   0%,100%{
  29.     -webkit-transform:translateX(-15px) rotate(5deg);
  30.             transform:translateX(-15px) rotate(5deg);
  31.   }
  32.   50%{
  33.     -webkit-transform:translateX(15px) rotate(-5deg);
  34.             transform:translateX(15px) rotate(-5deg)
  35.   }
  36. }
  37. @keyframes suspension{
  38.   0%,75%,100%{
  39.     -webkit-transform:rotate(3deg);
  40.             transform:rotate(3deg)
  41.   }
  42.   10%,30%,50%,70%,90%{top:0}
  43.   20%,40%,60%,80%,100%{top:-1px}
  44.   25%,50%{
  45.     -webkit-transform:rotate(-3deg);
  46.             transform:rotate(-3deg)
  47.   }
  48.   20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  49.   90%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}
  50. }

完整的 CSS 代码请参考下载文件。

纯 CSS3 制作逼真的汽车运动动画

已有 494 人购买
  • c9tz
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!