CSS3特斯拉汽车行驶特效代码下载


CSS3特斯拉汽车行驶特效代码下载
CSS3特斯拉汽车行驶特效代码下载以及特斯拉汽车行驶等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代码

<div class="title">
	<span data-char="C" style="--index: 0;">C</span><span data-char="Y" style="--index: 1;">Y</span><span data-char="B" style="--index: 2;">B</span><span data-char="R" style="--index: 3;">R</span><span data-char="T" style="--index: 4;">T</span><span data-char="R" style="--index: 5;">R</span><span data-char="K" style="--index: 6;">K</span>
</div>
<div class="backdrop">
  <div class="mountain" style="--lightness: 2; --height: 17; --width: 29; --speed: 50; --distance: 162; --delay: 50;"></div>
  <div class="mountain" style="--lightness: 2; --height: 20; --width: 35; --speed: 18; --distance: 172; --delay: 20;"></div>
  <div class="mountain" style="--lightness: 3; --height: 21; --width: 28; --speed: 17; --distance: 191; --delay: 48;"></div>
  <div class="mountain" style="--lightness: 10; --height: 18; --width: 31; --speed: 29; --distance: 195; --delay: 39;"></div>
  <div class="mountain" style="--lightness: 8; --height: 22; --width: 25; --speed: 33; --distance: 178; --delay: 25;"></div>
  <div class="mountain" style="--lightness: 8; --height: 25; --width: 40; --speed: 23; --distance: 181; --delay: 47;"></div>
  <div class="mountain" style="--lightness: 9; --height: 21; --width: 32; --speed: 24; --distance: 176; --delay: 42;"></div>
  <div class="mountain" style="--lightness: 5; --height: 22; --width: 17; --speed: 30; --distance: 178; --delay: 14;"></div>
  <div class="mountain" style="--lightness: 4; --height: 19; --width: 18; --speed: 18; --distance: 195; --delay: 30;"></div>
  <div class="mountain" style="--lightness: 9; --height: 21; --width: 40; --speed: 13; --distance: 179; --delay: 27;"></div>
</div>
<div class="truck">
  <div class="truck__body">
    <div class="truck__body truck__body--top">
      <div class="truck__window">
        <div class="truck__window-glass"></div>
      </div>
    </div>
    <div class="truck__body truck__body--mid">
      <div class="truck__mid-body"></div>
    </div>
    <div class="truck__body truck__body--bottom">
      <div class="truck__underpanel"></div>
      <div class="truck__rear-bumper"></div>
      <div class="truck__side-skirt"></div>
    </div>
  </div>
  <div class="truck__wheel truck__wheel--front">
    <div class="truck__wheel-arch"></div>
    <div class="truck__wheel-arch-trim truck__wheel-arch-trim--top"></div>
    <div class="truck__wheel-arch-trim truck__wheel-arch-trim--left"></div>
    <div class="truck__wheel-arch-trim truck__wheel-arch-trim--right"></div>
    <div class="truck-wheel">
      <div class="truck-wheel__rim">
        <div class="truck-wheel__spoke" style="--index: 0;"></div>
        <div class="truck-wheel__spoke" style="--index: 1;"></div>
        <div class="truck-wheel__spoke" style="--index: 2;"></div>
        <div class="truck-wheel__spoke" style="--index: 3;"></div>
        <div class="truck-wheel__spoke" style="--index: 4;"></div>
        <div class="truck-wheel__spoke" style="--index: 5;"></div>
        <div class="truck-wheel__spoke" style="--index: 6;"></div>
      </div>
    </div>
  </div>
  <div class="truck__wheel truck__wheel--rear">
    <div class="truck__wheel-arch"></div>
    <div class="truck__wheel-arch-trim truck__wheel-arch-trim--top"></div>
    <div class="truck__wheel-arch-trim truck__wheel-arch-trim--left"></div>
    <div class="truck__wheel-arch-trim truck__wheel-arch-trim--right"></div>
    <div class="truck-wheel">
      <div class="truck-wheel__rim">
        <div class="truck-wheel__spoke" style="--index: 0;"></div>
        <div class="truck-wheel__spoke" style="--index: 1;"></div>
        <div class="truck-wheel__spoke" style="--index: 2;"></div>
        <div class="truck-wheel__spoke" style="--index: 3;"></div>
        <div class="truck-wheel__spoke" style="--index: 4;"></div>
        <div class="truck-wheel__spoke" style="--index: 5;"></div>
        <div class="truck-wheel__spoke" style="--index: 6;"></div>
      </div>
    </div>
  </div>
  <div class="truck__headlight"></div>
  <div class="truck__taillight"></div>
  <div class="truck__indicator"></div>
  <div class="truck__foglight"></div>
</div>

相关推荐

发表评论

相关文章