[CSS] NowLoadingサンプル : Icon-Drop

2022/08/09

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

t f B! P L
eyecatch CSSアニメを日常的に作る事が趣味になりつつある、ユゲタです。 独自のアニメーションを作ったらそれはもはやアートですよね。 安定的なアニメーションを作ったら、ホームページで公開するということで、ブログの記事数を稼いでいるのも、否めませんが、 とにかくホームページ制作で、デザインも仕事で請け負う場合、作業に直結する事も多く、ある意味修行100本ノックという風にも考えています。 100日続けたら、100個の作品ができて、まさかの個展が開そうですね。(ウヒヒ)

デモ

W

コメント

今回のCSSアニメは、Icon-Dropというタイトルをつけてみたんですが、とあるサイトで小気味良く動いていたGIFアニメーションを、自分なりにsvgとcssで再現してみた、 いわゆるパクリ系アニメです。 Wという文字を表示していますが、正方形のアイコンなどを中心の置いても、いい感じに動くと思います。 できれば、色で印象を与えたいので、あまりごちゃごちゃとした色がたくさん使われているアイコンではなく、シンプルなアイコンや、短めのキーワードが好ましいですね。 Dropしている丸い箇所の色を変えるだけでも、ずいぶんと印象も変わるので、お好みに合わせて使えると思います。

ソース

html <div class="loading"> <div class="str">W</div> <div class="water"> <div></div> <div></div> <div></div> <div></div> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="drop"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo"></feColorMatrix> <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite> </filter> </defs> </svg> </div> css .loading { filter:url(#drop); position:relative; width:100px; height:100px; white-space:normal; } .str { z-index:2; position:absolute; text-align:center; line-height:100px; width:100%; height:100%; font-size:40px; color:white; font-weight:bold; animation: anim-str 2s ease-in-out infinite; } .water { z-index:1; position:relative; width:100%; height:100%; animation: anim-water 4s ease-in-out infinite; } .water > div { position:absolute; width:30px; height:30px; border-radius:50%; background-color:#1DA9F1; } .water > div:nth-child(1) { top:0; left:0; animation: anim-water-1 2s ease-in-out infinite; } .water > div:nth-child(2) { top:0; right:0; animation: anim-water-2 2s ease-in-out infinite; } .water > div:nth-child(3) { bottom:0; left:0; animation: anim-water-3 2s ease-in-out infinite; } .water > div:nth-child(4) { bottom:0; right:0; animation: anim-water-4 2s ease-in-out infinite; } @keyframes anim-str { 0%{ opacity:0; } 30%{ opacity:0; } 50%{ opacity:1; } 70%{ opacity:1; } 80%{ opacity:0; } 100%{ opacity:0; } } @keyframes anim-water { 0%{ transform:rotate(0deg); } 25%{ transform:rotate(90deg); } 50%{ transform:rotate(180deg); } 75%{ transform:rotate(270deg); } 100%{ transform:rotate(360deg); } } @keyframes anim-water-1 { 0%{ top:0; left:0; transform:scale(1); } 50%{ top:35px; left:35px; transform:scale(2.5); } 100%{ top:0; left:0; transform:scale(1); } } @keyframes anim-water-2 { 0%{ top:0; right:0; transform:scale(1); } 50%{ top:35px; right:35px; transform:scale(2.5); } 100%{ top:0; right:0; transform:scale(1); } } @keyframes anim-water-3 { 0%{ bottom:0; left:0; transform:scale(1); } 50%{ bottom:35px; left:35px; transform:scale(2.5); } 100%{ bottom:0; left:0; transform:scale(1); } } @keyframes anim-water-4 { 0%{ bottom:0; right:0; transform:scale(1); } 50%{ bottom:35px; right:35px; transform:scale(2.5); } 100%{ bottom:0; right:0; transform:scale(1); } }

関連リンク

他のNowLoadingも見る

人気の投稿

このブログを検索

ごあいさつ

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

ブログ アーカイブ