Blog

CSSでボーダーのアニメーションを考えてみたけど・・・

2015.12.02Cat:css3 デザイナー

ホバーアニメーションなんていってますが、
いわゆるある要素にマウスオーバーすると、要素が色変わったり、大きくなったりするやつで、それをcssやらjavascriptなんかでアニメーションさせる動きのことです。

今弊社サイトのブログ一覧では、ホバーするとグレースケールになりますが、
それをボーダーで出来ないかと考えてみました。

ボーダーを色を変えるのは当たり前のように出来るのですが、
CSSだけで簡単に横から変わっていったりといった動きをつけられるかを試してみました。

borderのプロパティだけでは色をゆっくり変えるくらいしか出来ませんでした。
(誰かおしえて下さい)

出来ないで終わってしまうのもなんなので、違うやり方で、ボーダーがアニメーションしている感じを表現しました。

下記から御覧ください!!
時間がなかったため、すごい簡単なのしか出来ませんでした・・・

DEMO

擬似要素とdivを重ねて表現しています。

ソースは下記になります。
※DEMOの「横からアニメーション」のソースになります。

html

css

もっとカッコイイのをやりたい場合は、
他を検索してみてください笑

コードが複雑になりますが、スタイリュッシュな表現もCSSだけで出来るようです!

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ