ホバーアニメーションを1から書けるようになりたい②枠線(transition)

ホバーすると左→右とか上→下とかに色が変わる、単純なやつは分かったので次は(枠)線!

線が1本動く

Just a moment...

下線が左→右

前回の①のその2とほぼ同じというか線にするためにheightが低くなっただけ。中央→左右の端の動きは::afterの始点をleft:50%などで中央にする。右→左ならright:0。だんだん分かってきた感ある……!
疑似要素のcontentってblockにしないといけないと何故か思い込んでたけど特になにも設定しなくても表示されるんだなぁ

<div class="button">Hover</div>
.button {
background: #c4d700;
display: inline-block;
color: #fff;
padding: 18px 53px;
text-align: center;
position: relative;
transition: .5s;
}
.button:after {
position: absolute;
transition:all .5s ease;
content: '';
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: #e62e8b;
}
.button:hover {
cursor: pointer;
}
.button:hover:after {
width: 100%;
}

下線が左→右、離すと右に消える

:hover::afterがright:0→left:0で左下始点の状態で、widthが0→100%になるから左から右に伸びて、カーソルが離れると::afterが適用されてright:0になるから右に消えてく……?
:hover::afterに伸びるときの始点を指定して、::afterは線の収束(?)位置を指定すればいい感じかなぁ

borderがある状態で上→下、とかだと、border分、線の位置調整しないといけないのか……0指定するとborderの内側に入ってるな……めんどくさいな……

.button {
background: #c4d700;
display: inline-block;
color: #fff;
padding: 18px 53px;
text-align: center;
position: relative;
}
.button::after {
position: absolute;
transition:all .5s ease;
content: '';
width: 0;
bottom: 0;
right: 0;
height: 3px;
background: #e62e8b;
}
.button:hover {
cursor: pointer;
}
.button:hover::after {
width: 100%;
left: 0;
}

線が4本動く

Just a moment...

4点から線が出る

divとspanの::afterと::beforeで4こ。4箇所から同時に線が出てる。
divが横線で(←右上、左下→)、spanが縦線(左上↓、右下↑)で反時計回りの枠線
仕組み同じなので理解しやすい

<div><span>Hover</span></div>
div{
display: inline-block;
position: relative;
background: #c4d700;
padding: 18px 53px;
color: #fff;
cursor: pointer;
}
span{
display: block;
}
div::before, div::after{
content:"";
width: 0;
height: 2px;
position: absolute;
transition: all .3s ease;
background: #e62e8b;
}
div::before{
right: 0;
top: 0;
}
div::after{
left: 0;
bottom: 0;
}
span::before, span::after{
content:"";
width:2px;
height:0;
position: absolute;
transition: all 0.3s ease;
background: #e62e8b;
}
div span::before{
left: 0;
top: 0;
}
div span::after{
right: 0;
bottom: 0;
}
div:hover::before, div:hover::after{
width: 100%;
}
div:hover span::before, div:hover span::after{
height: 100%;
}

1周するやつ(transition-delay)

これどういう仕組み……?って謎だったけど、4箇所から線出してるのは同じで、タイムングをうまく合わせてあたかも一本の線が周ってるかのように見せてるらしい。1辺の秒数って決まってんの!?10pxと1000pxなら時間違うんでは!?目視で合わせるのか?ってアホみたいなこと考えてしまったがそうですねtransitionって時間決めるやつでしたね……transitionの秒数分、ずらしてるのね……
transition: all .3s ease;だからdelayで0.3ずつずらしてる

<div><span>Hover</span></div>
div{
display: inline-block;
position: relative;
background: #c4d700;
padding: 18px 53px;
color: #fff;
cursor: pointer;
}
span{
display: block;
}
div::before, div::after{
content:"";
width: 0;
height: 2px;
position: absolute;
transition: all .3s ease;
background: #e62e8b;
}
span::before, span::after{
content:"";
width:2px;
height:0;
position: absolute;
transition: all .3s ease;
background: #e62e8b;
}
div::after{
left: 0;
bottom: 0;
transition-delay: .9s;
}
div span::after{
right: 0;
bottom: 0;
transition-delay: .6s;
}
div::before{
right: 0;
top: 0;
transition-delay: .3s;
}
div span::before{
left: 0;
top: 0;
transition-delay: 0s;
}
div:hover::after{
transition-delay: 0s;
}
div:hover span::after{
transition-delay: .3s;
}
div:hover::before{
transition-delay: .6s;
}
div:hover span::before{
transition-delay: .9s;
}
div:hover::before, div:hover::after{
width: 100%;
}
div:hover span::before, div:hover span::after{
height: 100%;
}

コメント

タイトルとURLをコピーしました