我試圖在邊框上獲得過(guò)渡懸停效果，使邊框在懸停時(shí)擴(kuò)展。h1 { color: #666;}h1:after { position: absolute; left: 10px; content: ''; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition: left 250ms ease-in-out, right 250ms ease-in-out; opacity: 0;}h1:hover:after { opacity: 1;}<h1>CSS IS AWESOME</h1>
3 回答
幕布斯6054654
TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超7個(gè)贊
要擴(kuò)展懸停時(shí)的底部邊框，可以使用transform:scaleX'();（mdn reference）并將其在懸停狀態(tài)下從0過(guò)渡到1。
這是邊框懸停效果的示例：
邊框和過(guò)渡設(shè)置在偽元素上，以防止過(guò)渡文本并避免添加標(biāo)記。
要從左側(cè)或右側(cè)擴(kuò)展底部邊框，可以將transform-origin屬性更改為偽元素的左側(cè)或右側(cè)：
h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1:hover:after { transform: scaleX(1); }
h1.fromRight:after{ transform-origin:100% 50%; }
h1.fromLeft:after{ transform-origin: 0% 50%; }
<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>
注意：您需要添加供應(yīng)商前綴以最大化瀏覽器支持（請(qǐng)參見(jiàn)canIuse）。
用2行擴(kuò)展懸停時(shí)的底部邊框
當(dāng)文本跨兩行時(shí)，您可以實(shí)現(xiàn)此效果。before偽元素的絕對(duì)位置是使第一行的下劃線為bottom:1.2em;：
h1 { position:relative;color: #666;display:inline-block; margin:0;text-transform:uppercase;text-align:center;line-height:1.2em; }
h1:after, h1:before {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1:before{
position:absolute;
bottom:1.2em; left:0;
width:100%;
}
.ef2:hover:after {
transition-delay:150ms;
}
h1:hover:after, h1:hover:before { transform: scaleX(1); }
<h1>Expand border<br/>on two lines</h1>
<br/>
<br/>
<h1 class="ef2">Expand border<br/>effect two</h1>
懸停進(jìn)出時(shí)的不同過(guò)渡方向：
關(guān)鍵是在懸停狀態(tài)下將變換原點(diǎn)位置從一側(cè)更改為另一側(cè)。這樣，當(dāng)元素不再懸停時(shí)，底部Boder 將從懸停的一側(cè)進(jìn)入而從另一側(cè)退出。
這是一個(gè)演示：
h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1.fromLeft:after{ transform-origin: 100% 50%; }
h1.fromRight:after{ transform-origin: 0% 50%; }
h1.fromLeft:hover:after{ transform: scaleX(1); transform-origin: 0% 50%; }
h1.fromRight:hover:after{ transform: scaleX(1); transform-origin: 100% 50%; }
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>
添加回答
舉報(bào)
0/150
提交
取消