[CSS] NowLoadingサンプル : Cube

アニメーション・エコシステムの伝道者、ユゲタです。 いや〜、アニメーションすると、人の視線を注目させる事ができ、 なかなかのエンターテイメントです。 Webページにおいて、ちょっとしたワンポイントで効果的なアニメーションを実装することで、そのホームページのクオリティが、格段にアップする事ができます。 ローディングアニメって、ゲームなどのコンテンツサイトじゃないかぎり、そんなに長い間表示するワケではないですが、 そうしたちょっとしたワンポイントでのこだわりが、閲覧する人の印象に残りやすいんですよね。 今回は、ちょっとトリッキーに見えるグリッド機能を使用した、Box型のCubeアニメをご紹介します。 波打って見えるのが、非常に効果的だと思いませんか？

デモ

ソース

html <div class="cube"> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> </div> css .cube{ width : 128px; height : 128px; display : grid; grid-template-columns : 1fr 1fr 1fr; grid-template-rows : 1fr 1fr 1fr; overflow : hidden; } .cube > .grid{ position : relative; width : 100%; height : 100%; margin : 0; padding : 0; border : 0; font-size : 0; background-color : black; animation : anim-cube-grid 1.5s ease-in-out infinite; } .cube > .grid:nth-child(3){animation-delay: -0.0s;} .cube > .grid:nth-child(2), .cube > .grid:nth-child(6){animation-delay: -0.1s;} .cube > .grid:nth-child(1), .cube > .grid:nth-child(5), .cube > .grid:nth-child(9){animation-delay: -0.2s;} .cube > .grid:nth-child(4), .cube > .grid:nth-child(8){animation-delay: -0.3s;} .cube > .grid:nth-child(7){animation-delay: -0.4s;} @keyframes anim-cube-grid{ 0%{transform:scale(1.1)} 25%{transform:scale(0.0)} 50%{transform:scale(1.1)} 100%{transform:scale(1.1)} }

関連リンク

他のNowLoadingも見る