순수한 CSS3로 사실적인 자동차 모션 애니메이션 만들기

간단한 튜토리얼

순수한 CSS3를 사용하여 만든 실감나는 자동차 모션 애니메이션 특수 효과입니다. 이 특수 효과에서는 모든 요소가 CSS를 통해 렌더링되며 이미지는 사용되지 않습니다. 도로의 얼룩말을 좌우로 흔들어 자동차가 움직이는 듯한 시각적 효과를 만들어냅니다.

사용방법

HTML 구조

자동차 모션 애니메이션 전체의 HTML 구조는 다음과 같습니다.

<div class="car">
  <div class="body">
    <div class="mirror-wrap">
      <div class="mirror-inner">
        <div class="mirror">
          <div class="shine"></div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="top">
        <div class="line"></div>
      </div>
      <div class="bottom">
        <div class="lights">
          <div class="line"></div>
        </div>
      </div>
    </div>
    <div class="bumper">
      <div class="top"></div>
      <div class="middle" data-numb="..."></div>
      <div class="bottom"></div>
    </div>
  </div>
  <div class="tyres">
    <div class="tyre back"></div>
    <div class="tyre front"></div>
  </div>
</div>
<div class="road-wrap">
  <div class="road">
    <div class="lane-wrap">
      <div class="lane">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</div>

CSS 스타일

CSS 스타일에서 자동차는 주로 각 자동차 구성 요소의 :before 및 :after 의사 요소를 통해 구성됩니다. 전체 특수 효과에는 전면 유리창의 샤인 애니메이션, 차체가 좌우로 흔들리는 서스펜션 애니메이션, 도로의 좌우 이동을 나타내는 차선 애니메이션, 조향 차선 얼룩말 횡단 애니메이션 등 4가지 애니메이션이 사용됩니다.

@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를 이용하여 실감나는 자동차 모션 애니메이션을 제작한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!