【CSS】【アニメ】CSSだけでポップでわくわくするドライブ感を出してみる


CSSだけって HTMLは使いますが、JavaScriptは使わずに表現を試してみます。CSSだけで画像を使わずパーツを配置し、しかもアニメーションもしちゃいます。

このページの実践例として作成してみた。

見た目にびっくりする 装飾をCSSで作るときのHTML・CSS知識とコツ

考え方

全体的な配置

図形パズルのように 四角を変形させて ただパーツを配置しただけ。

回転とフレーム

下側に大きい円を描いて、回したいものと静止したいものレイヤーを意識して配置。 検討ポイント

  • 回転するものしないもの
  • 手前と奥の順番

ソース

HTML

    <div class="canvas">
        <div class="cloud">
          <div class="m" style="left:10px;top:-8px;"></div>
          <div class="m" style="left:26px;top:18px;"></div>
          <div class="m" style="left:35px;top:-8px;"></div>
          <div class="m" style="left:5px;top:16px;"></div>
      </div>
      
      <div class="cloud" style="left:270px;top:40px">
        <div class="m" style="left:10px;top:-8px;"></div>
        <div class="m" style="left:26px;top:18px;"></div>
        <div class="m" style="left:35px;top:-8px;"></div>
        <div class="m" style="left:5px;top:16px;"></div>
      </div>

      <div class="road">
        <div class="outer"></div>
        <div class="center"></div>
        <div class="inner"></div>
      </div>

      <div class="moveFrame">
        <div class="tree">
            <div class="leaf"></div>
        </div>
        <div class="tree" style="left:400px;transform: rotate(20deg);">
          <div class="leaf"></div>
        </div>
        <div class="tree" style="left:400px;top:550px;transform: rotate(160deg);">
          <div class="leaf"></div>
        </div>
      </div>

      <div class="car">
          <div class="tire"></div>
          <div class="tire" style="left:40px;"></div>
      </div>

      <div class="moveFrame" style="top:220px;">
        <div class="tree" style="left:110px;top:110px;;transform: rotate(-40deg);">
          <div class="leaf"></div>
        </div>
      </div>
    </div>

  </div>

CSS

      .canvas{
        position: relative;
        overflow: hidden;
        width:400px;
        height: 400px;
        background: linear-gradient(to bottom, lightcyan, darkblue);
        border: 5px solid black;
     }

    .cloud{
      position: absolute;
      background-color: white;
      opacity: .95;
      border-radius: 10px;
      width:60px;
      height: 25px;
      z-index: 10;
      left: 30px;
      top: 50px;
      box-shadow: 2px 2px 3px whitesmoke;
    }

    .cloud .m{
      position: absolute;
      background-color: white;
      opacity: .95;
      border-radius: 10px;
      width:23px;
      height: 20px;
      z-index: 10;
      left: 30px;
      top: 50px;
      box-shadow: 2px 2px 3px whitesmoke;
    }

    .road{
      position: absolute;

      background: linear-gradient(to bottom, greenyellow,  green);
      border-radius: 300px;
      width:  600px;
      height: 600px;
      left: -100px;
      top: 200px;
    }
    .road .outer{
      position: absolute;
      background-color: gray;
      border: 4px solid black;
      border-radius: 300px;
      width:  600px;
      height: 600px;
      left: 0px;
      top: 40px;
    }
    .road .center{
      position: absolute;
      border: 4px dashed white;
      border-radius: 300px;
      width:  600px;
      height: 600px;
      left: 0px;
      top: 60px;
      animation:  drive 12s linear infinite;
    }
    .road .inner{
      position: absolute;
      border: 4px solid black;
      background: linear-gradient(to bottom, greenyellow,  green);
      border-radius: 300px;
      width:  600px;
      height: 600px;
      left: 0px;
      top: 80px;
    }
    .moveFrame{
      position: absolute;
      width:  600px;
      height: 600px;
      left: -100px;
      top: 200px;
      animation:  drive 12s linear infinite;
    }

    .tree{
      position: absolute;
      background-color: brown;
      width:  15px;
      height: 60px;
      left: 300px;
      top: -28px;
    }
    .leaf{
      position: relative;
      border: 1px solid transparent;
      border-bottom: 15px solid green;
      border-width: 0 30px 80px 30px;
      width:  0px;
      height: 0px;
      left: -20px;
      top: -30px;
    }

    .car{
      position: absolute;
      width:  50px;
      height: 20px;
      background-color: red;
      left: 50px;
      top:250px;
      transform: rotate(-20deg);
      animation: driveCar 12s linear infinite;
    }
    .car::before{
      content: "";
      position: absolute;
      width:  60px;
      height: 20px;
      background-color: firebrick;
      transform: skewX(20deg);
      left: 0px;
      top:10px;
    }

    .car .tire{
      position: absolute;
      width:  10px;
      height: 10px;
      background-color: black;
      transform: skewX(20deg);
      border-radius: 3px 5px 2px 7px;
      border:2px dashed darkgray;
      left: 3px;
      top:19px;
      animation: rotateTire 2s linear infinite;
    }

    @keyframes drive{
      0% {  transform: rotate(360deg);}
      100% {  transform: rotate(0deg);}
    }

    @keyframes driveCar{
      0% {  top: 252px;left:52px;}
      4% {  top: 251px;left:50px;}
      6% {  top: 248px;left:51px;}
      8% {  top: 250px;left:50px;}

      10% {  top: 252px;left:48px;}
      14% {  top: 251px;left:50px;}
      16% {  top: 248px;left:47px;}
      18% {  top: 250px;left:50px;}
    }
    @keyframes rotateTire{
      0% {  transform: rotate(0deg);}
      100% { transform: rotate(360deg);}
    }

たゆたうという言葉は、この漫画で初めて知りました。

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

105 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です