【CSS】【アニメーション】超絶簡単にCSSだけで シンプルな和風の動く絵を描いてみる


このページの実践例として作成してみた。 画像・JavaScriptを使わずにCSS+HTMLを使って、パーツをドローツールのように配置し、アニメーションします。 見た目にびっくりする 装飾をCSSで作るときのHTML・CSS知識とコツ

考え方

全体的な配置

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

くりぬき

丸いウインドウは、border-radius で 真円を描き、overflow:hiddenでクリッピングすれば 子要素に書いたものだけが表示される。

ちょっと鳥山明

ソース

HTML

  <div class="canvas">
    <div class="cloud" style="animation: tayutayu1 40s linear 8"></div>
    <div class="cloud" style="left:90px; top:100px;animation: tayutayu2 50s linear 8;"></div>

    <div class="window">
      <div class="mountain" style="left:30px;top:110px"></div>
      <div class="mountain"></div>
      <div class="tree"  style="left:30px;top:152px;height:32px;"></div>
      <div class="tree"  style="left:140px;top:240px"></div>
      <div class="tree"  style="left:140px;top:120px"></div>
      <div class="tree"  style="left:250px;top:130px;background-color: rgb(8, 68, 13);height:23px;width:8px;"></div>
      <div class="tree"  style="left:245px;top:140px;background-color: rgb(8, 68, 13);height:25px;width:8px;"></div>
      <div class="tree"  style="left:250px;top:190px"></div>

      <div class="moon">
        <div class="lack"></div>
      </div>
    </div>
  </div>

CSS

.canvas{
      position:relative;
      width:400px;
      height: 400px;
      background: linear-gradient(to bottom, lightcyan, darkblue);
    }

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

    .window{
      position: absolute;
      overflow: hidden;
      border: 5px solid black;
      background: linear-gradient(to bottom, gray, darkgray);
      border-radius:  150px;
      width:300px;
      height: 300px;
      left: 50px;
      top: 80px;
    }

    .mountain{
      background: linear-gradient(to bottom, greenyellow,  green);
      position: absolute;
      width:300px;
      height: 340px;
      border: 5px solid black;
      border-radius:40px;
      left: -105px;
      top: 180px;
      transform: rotate(50deg);
    }

    .tree{
      position: absolute;
      background-color: darkgreen;
      border-radius: 10px;
      width:10px;
      height:25px;
    }
    .moon{
      position: absolute;
      background-color: yellow;
      border-radius: 18px;
      width:25px;
      height:25px;
      left:80px;
      top:80px;
    }
    .moon .lack{
      position: relative;
      background-color: gray;
      opacity: .88;
      border-radius: 18px;
      width:25px;
      height:25px;
      left:-3px;
      top:-5px;
    }

    @keyframes tayutayu1{
        0% { left:-20px;opacity: 0;height:15px;}
       30% { left:30px ;opacity: .97}
       50% { height:25px;}
      100% { left:390px}
    }
    @keyframes tayutayu2{
        0% { left:-20px;opacity: 0;height:17px;}
       30% { left:90px;opacity: .97}
       50% { height:25px;}
      100% { left:390px}
    }
たゆたうという言葉は、この漫画で初めて知りました。
Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

176 views.



コメントを残す

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