[CSS] NowLoadingサンプル : Cube

2022/08/11

CSS テクノロジー プログラミング 特集

t f B! P L
eyecatch アニメーション・エコシステムの伝道者、ユゲタです。 いや〜、アニメーションすると、人の視線を注目させる事ができ、 なかなかのエンターテイメントです。 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も見る

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ