目次
本記事ではマウスオーバーでボーダーが要素を一周するアニメーションをご紹介しています。もう少し詳しく説明すると、ボタンやボックスといった要素をマウスオーバーすると、要素の外周に沿ってボーダーが描画されるアニメーションです！
……と言われても文字だけで想像するのは結構難しいですよね。なので簡単なデモをご用意させていただきました。下記の「Hover Me!」と記載されたボタンのようなリンクにマウスカーソルを合わせてみてください。スマホの方はタップでお願いします。
See the Pen Hover Animation10 | CSS by ryohei (@intotheprogram) on CodePen.
いかがでしょうか。
「Hover Me!」と記載された要素にカーソルを合わると、要素の外周を沿うような形でボーダーが描画されたかと思います。要素がクリックされるかはさておき、つい最後まで見てしまいますよね！このアニメーションを要素に設定しておくことで閲覧者の注目を集めることができるかと思います！
では、解説していきます。
スポンサーリンク
ボーダーアニメーションを表示する要素を作成する
まずは簡単にボタンやボックス要素をマークアップします。本記事ではaタグを使用していますが、class名を付けてあげると汎用的に使いまわせるかと思います。
HTML
<a href="#">Hover Me!</a>
以上でマークアップは完了です。続いて上記で用意した要素に、CSSでスタイルを付けていきます。
通常時・マウスオーバー時のスタイルを定義する
下記が実際に使用しているスタイルです。若干長くなってしまいましたので、簡単にですが補足させていただきます。
本記事でご紹介しているボーダーアニメーションは、疑似要素に予め設定したボーダーをマウスオーバーで表示することにより実現しています。
予め疑似要素の幅と高さをゼロにして透明のボーダーを設定しておき、マウスオーバー時にそれらをアクティブにしてトランジションアニメーションで表示しています。また、ボーダーが要素に沿って順番に表示されるように、transition-delayで開始時間がずれるようにしています。
CSS
a {
position: relative;
display: block;
width: 320px;
height: 57px;
line-height: 57px;
margin: 40px auto;
text-align: center;
text-decoration: none;
color: #a8aabc;
font-weight: bold;
transition: .25s;
box-shadow: 2px 2px 5px 0px rgba(200,200,200,1);
background-color: #ffffff;
}
a::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
border: 2px solid transparent;
}
a::after {
content: '';
position: absolute;
bottom: -2px;
right: -2px;
width: 0;
height: 0;
border: 2px solid transparent;
}
a:hover {
color: #384878;
}
a:hover::before {
width: 100%;
height: 100%;
border-top-color: #384878;
border-right-color: #384878;
transition: width .25s ease-out, height .25s ease-out .25s;
}
a:hover::after {
width: 100%;
height: 100%;
border-bottom-color: #384878;
border-left-color: #384878;
transition: border-color 0s ease-out .5s, width .25s ease-out .5s, height .25s ease-out .75s;
}
スポンサーリンク
最後に
いかがでしたでしょうか。
本記事の内容とは若干異なりますが、下記の記事でもボーダー系のマウスオーバーのアニメーションをご紹介していますので、併せてご確認いただければ幸いです。
【CSS】マウスオーバーで四辺のボーダーが伸びるアニメーション
以上、CSSでマウスオーバーでボーダーが要素を一周するアニメーションのご紹介でした！
