[css] hoverのin-outで違うアクションをさせたいんじゃ!

2021年8月16日

テクノロジー

eyecatch ライブラリ研究科の、ユゲタです。 色々なライブラリの中のコードを見ていると、簡単にできる新しい技術の発見をする事があります。 今回は、とあるwebサイトを見ていた時に、cssのhoverアクションが、入口と出口で違うモーションをしていて、 これまで、そんなことやろうと思ったこともなかったんですが、いったいどうやって実現しているのか、 どうしても気になって、寝る時間を削って、調べてみました。 それを惜しげもなく、ブログで公開しておこうと思います。 ・・・え?恩着せがましすぎる?・・・自分で言っておかないと誰も言ってくれないので・・・

通常のhover処理

<a class="sample-1" href="">マウスカーソルを乗せて</a> <style> a.sample-1{ position:relative; display:inline-block; padding:10px; line-height:50px; border:1px solid red; text-align:center; text-decoration:none; font-weight:bold; overflow:hidden; } a.sample-1:hover{ color:white; } a.sample-1::before{ content:""; position:absolute; top:0; left:0; display:block; width:100%; height:100%; transform:scaleX(0); background-color:red; z-index:-1; transition-property:transform; transition-duration:0.5s; transform-origin: left center; } a.sample-1:hover::before{ transform:scaleX(1); } </style> まず、サンプルのコードはこれです。 transitionをhoverの有り無しで、transform-scaleのサイズを変更しています。 マウスのhover-onした時に、背景色が、メーターのように、0 -> fullになって、 hover-outした時に、full -> 0にもどるという、一般的なtransitionアニメーションです。 マウスカーソルを乗せて

in-outで違うモーション

<a class="sample-2" href="">マウスカーソルを乗せて</a> <style> a.sample-2{ position:relative; display:inline-block; padding:10px; line-height:50px; border:1px solid red; text-align:center; text-decoration:none; font-weight:bold; overflow:hidden; z-index:1; } a.sample-2:hover{ color:white; } a.sample-2::before{ content:""; position:absolute; top:0; left:0; display:block; width:100%; height:100%; z-index:-1; transform:scaleX(0); background-color:red; transition-property:transform; transition-duration:0.5s; transform-origin: right center; } a.sample-2:hover::before{ transform:scaleX(1); transform-origin: left center; } </style> こんどは、先程のコードに1行追加して、みました。 一番最後の値の transform-origin: left center; が追加されています。 こうすることで、hover-outした時に、hover-inとは、逆方向にアニメーションしているのがわかると思います。 マウスカーソルを乗せて

いろいろ応用

この方式を利用すると、アンダーラインのアニメーションもこのようにできます。 <a class="sample-3" href="">マウスカーソルを乗せて</a> <style> a.sample-3{ position:relative; display:inline-block; padding:2px 5px; text-align:center; text-decoration:none; font-weight:bold; z-index:1; color:black; } a.sample-3::before{ content:""; position:absolute; left:0; bottom:0; display:block; width:100%; height:1px; z-index:-1; transform:scaleX(0); background-color:black; transition-property:transform; transition-duration:0.5s; transform-origin: right bottom; } a.sample-3:hover::before{ transform:scaleX(1); transform-origin: left bottom; } </style> マウスカーソルを乗せて もちろん、縦方向にもできます。 <a class="sample-4" href="">マウスカーソルを乗せて</a> <style> a.sample-4{ position:relative; display:inline-block; padding:10px; line-height:50px; border:1px solid orange; text-align:center; text-decoration:none; font-weight:bold; overflow:hidden; z-index:1; } a.sample-4:hover{ color:white; } a.sample-4::before{ content:""; position:absolute; top:0; left:0; display:block; width:100%; height:100%; z-index:-1; transform:scaleY(0); background-color:orange; transition-property:transform; transition-duration:0.5s; transform-origin: left bottom; } a.sample-4:hover::before{ transform:scaleY(1); transform-origin: left top; } </style> マウスカーソルを乗せて 趣向が変わって、いい感じにもできるかもですね。 工夫次第で、アイデアは無限大! 効果的なwebサイトが作れそうですわい!!!

このブログを検索

ごあいさつ

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