HOME > cssAnimation > cssでborderが四角から伸びて枠線になる動きの作り方【コピペで1分】

cssでborderが四角から伸びて枠線になる動きの作り方【コピペで1分】

目次: cssでborderが四角から伸びて枠線になる動きのDEMO; cssでborderが四角から伸びて枠線になる動きの作り方解説; HTML記述; css記述

cssでborderが四角から伸びて枠線になる動きのDEMO

※「SAMPLE」の文字にマウスをホバーすると動きます。

SAMPLE

cssでborderが四角から伸びて枠線になる動きの作り方解説

cssでborderが四角から伸びて枠線になる動きとしては、擬似要素「::before」「::after」を使用して実装できます。

1．親要素にposition: relative;を指定し擬似要素の基点とします。
2．横と縦の動きを実装する為にspanに縦の動き用のクラスを付与します。
3．次に擬似要素にposition: absolute;を指定し絶対位置（今回は縦横、四つの角をそれぞれ個別に指定します。）
4．:hoverされた時にX軸（横軸）とY軸（縦軸）の0が指定されている部分が100%+1pxになるように指定する。
5．正しく動作していれば完成です。

HTML記述

HTMLをbody内の表示位置に記載します。

<a href="#" class="moveline">
    <span class="moveline-vertical">SAMPLE</span>
</a>

css記述

cssを<style>~</style>または自作cssの中に記述します。

/* .movelineを基点にします */
.moveline {
    display: inline-block;
    position: relative;
}

.moveline::after,
.moveline::before,
.moveline-vertical::after,
.moveline-vertical::before {
    content: '';
    position: absolute;
    z-index: 10;                /* レイヤーの重ね順 */
    background-color: #01a99d;  /* 線色 */
    transition: all .3s ease;   /* アニメーション時間 */
}

/* .moveline::after は横幅0px、高さ1pxで、左上の位置に配置されます */
.moveline::after {
    width: 0px;
    height: 1px;
    top: -1px;
    left: -1px;
}

/* .moveline-vertical::after は横幅1px、高さ0pxで、左下に配置されます */
.moveline-vertical::after {
    width: 1px;
    height: 0px;
    left: -1px;
    bottom: -1px;
}

/* .moveline::before の要素は横幅0px、高さ1pxで、右下の位置に配置されます */
.moveline::before {
    width: 0px;
    height: 1px;
    right: -1px;
    bottom: -1px;
}

/* .moveline-vertical::before の要素は横幅1px、高さ0pxで、右上の位置に配置されます */
.moveline-vertical::before {
    width: 1px;
    height: 0px;
    top: -1px;
    right: -1px;
}

/* .movelineクラスの要素がホバーされた時に横幅が100% + 1pxになります */
.moveline:hover::after,
.moveline:hover::before {
    width: calc(100% + 1px);
}

/* .movelineクラスの要素がホバーされた時に高さが100% + 1pxになります */
.moveline:hover .moveline-vertical::after,
.moveline:hover .moveline-vertical::before {
    height: calc(100% + 1px);
}