昨日に引き続き、CSSの小ネタを紹介します。「CSSでボーダーをボックスに沿って走らせる」とか、よく分からないタイトルですが、簡単にいうとボーダーをボックスに沿って移動させる方法で、四角いボックスの外周を回り続けるエフェクトの実装方法になります。

正確には、CSSでいうところのborderプロパティではなくて、1pxの高さ(または幅)を持った要素をCSSのアニメーションで動かしています。

四角いボックスの外周を回り続けるエフェクトとは

言葉では説明しづらいので、以下の奴がそうです。DEMOというテキスト部分をマウスホバーすると、2本の線が現れて外周を回りだします。

DEMO

ヒーローイメージとゴーストボタンを使いたかったという理由だけで、デモも作ってみました。ただの自己満足。

これのやり方

個人的になかなか面白い効果だなと思っているのですが、全てCSSで比較的簡単に実装できます(正方形の場合は特に)。

実際には以下のように、一辺ごとにアニメーションさせて、タイミングよく動かしているだけで、特に難しいことはやっていません(マウスホバーで線が動きます)。余分なところはoverflow:hiddenで消しているわけですね。

コードは以下の通り。

HTML

<p class="btn__box">
    <a href="#">text</a>
</p>

HTMLは何でもいいのですが、親と子の状態にしておきます。

CSS

装飾とかの部分は省略しています。ベンダープレフィックスも省いていますので、適時、追加してください。

/* ボタンの大きさと位置をここで指定 */
.btn__box {
    position: relative;
    width: 200px;
    height: 200px;
    line-height: 200px;
    overflow: hidden;
}
.btn__box a {
    display: block;
}

/* 線(ボーダー)のスタイル 共通 */
.btn__box:before,
.btn__box:after,
.btn__box a:before,
.btn__box a:after {
    content: '';
    position: absolute;
    background: #000; /*線の色*/
}
/* 下のボーダー */
.btn__box:before {
    bottom: 0;
    left: -200px;
    width: 200px;
    height: 1px;
}
/* 右のボーダー */
.btn__box:after {
    bottom: -200px;
    right: 0;
    width: 1px;
    height: 200px;
}
/* 上のボーダー */
.btn__box a:before {
    top: 0;
    right: -200px;
    width: 200px;
    height: 1px;
}
/* 左のボーダー */
.btn__box a:after {
    top: -200px;
    left: 0;
    width: 1px;
    height: 200px;
}

/* ホバー時のアニメーション指定 */
.btn__box:hover:before {
    animation: leftAnim 1.5s linear 0s infinite;
}
.btn__box:hover:after {
    animation: bottomAnim 1.5s linear .75s infinite;
}
.btn__box a:hover:before {
    animation: rightAnim 1.5s linear 0s infinite;
}
.btn__box a:hover:after {
    animation: topAnim 1.5s linear .75s infinite;
}

/* 各アニメーション */
@keyframes topAnim {
    0% {top:-200px;}
    100% {top:200px;}
}
@keyframes bottomAnim {
    0% {bottom:-200px;}
    100% {bottom:200px;}
}
@keyframes rightAnim {
    0% {right:-200px;}
    100% {right:200px;}
}
@keyframes leftAnim {
    0% {left:-200px;}
    100% {left:200px;}
}

親要素で余分な部分を非表示

前述の通り、親要素にoverflow:hidden;を指定して、はみ出す余分な部分をカットしています。

ボーダー部分は疑似要素で

ボーダーの部分は、親要素であるpと、子要素aそれぞれの疑似要素(beforeとafter)を利用することで表現しています。こうすることで無駄なHTMLの空要素が不要になります。

疑似要素にはそれぞれposition:absolute;を指定して絶対配置します。

横のボーダー(上下の線)はheightを1pxに、縦のボーダー(左右の線)はwidthを1pxにして、backgroundで色をつけてボーダーっぽくしています。

アニメーションはタイミングが重要

アニメーションはタイミングが重要となります。先に横ボーダーをスタートさせて、角まで到達したら縦のボーダーをスタートさせることで、1本の線がぐるぐると回っているかのように見せています。animation-delayで、アニメーションが始まる時間をずらしているわけです。

ボーダーの動きは、top、bottom、left、rightの値を変更することで行っています。

長方形のボタン(ボックス)の場合

正方形の場合は特に難しいことはないんですが、長方形になると横と縦の距離が変わるため、animation-durationの値を縦横で調整する必要がでてきたり、ボーダーの長さとか、開始のタイミングも考えなくちゃいけなくなるし、結構難しいんですよね(めんどくさくなってやめた)。

少しややこしいので、また時間があるときにでもやってみたいと思っています。

おわり

正方形だと使いどころが限られてしまうので、やっぱり長方形でうまいことやりたいですね。