[css]マウスオーバー時に背景が塗り替わるやつ

transform安定。

ベース
基本形
円形（正円）に対して中央基準でやる
ポイント

ベース

こんなんでやっていく。

<a href="" class="sample">***</a>

基本形

こう。

a.sample{
    width: 200px;
    height: 30px;
    display: block;
    position: relative;
}
a.sample::before{
    content: "";
    width: 0;
    height: 100%;
    background: red;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 1s;
}
a.sample:hover::before{
    width: 100%;
}

アニメーションはtransitionで指定。

疑似要素（::before）で背景を重ねてるんで、z-indexで順番の調整が必要になる。

左端を基準に配置してるから左から背景色が生えてくる。高さを<a>に合わせてるけど、1pxとかにすれば下線が生えてくる感じにできたりもする。

これはwidthをいじってるけど、heightを変化させたら縦方向になる。

円形（正円）に対して中央基準でやる

こう。

a.sample{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
a.sample::before{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: red;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0,0);
    z-index: -1;
    transition: transform 1s;
}
a.sample:hover::before{
    transform: translate(-50%,-50%) scale(1,1);
}

width、heightじゃなくてtransformでサイズを変化させる。

transformは毎度指定してるものを全部書かないとリセットされちゃうので気をつけること。

ポイント

体感的にtransformで変化させたほうが安定感がある。そうでないとたまに動かない場合がある。