我試圖在邊框上獲得過渡懸停效果，使邊框在懸停時擴展。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貢獻1876條經驗 獲得超7個贊
要擴展懸停時的底部邊框，可以使用transform:scaleX'();（mdn reference）并將其在懸停狀態下從0過渡到1。
這是邊框懸停效果的示例：
邊框和過渡設置在偽元素上，以防止過渡文本并避免添加標記。
要從左側或右側擴展底部邊框，可以將transform-origin屬性更改為偽元素的左側或右側：
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>
注意：您需要添加供應商前綴以最大化瀏覽器支持（請參見canIuse）。
用2行擴展懸停時的底部邊框
當文本跨兩行時，您可以實現此效果。before偽元素的絕對位置是使第一行的下劃線為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>
懸停進出時的不同過渡方向：
關鍵是在懸停狀態下將變換原點位置從一側更改為另一側。這樣，當元素不再懸停時，底部Boder 將從懸停的一側進入而從另一側退出。
這是一個演示：
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>
- 3 回答
- 0 關注
- 745 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消