在悬停时展开底部边框 [英] Expand bottom border on hover
问题描述
我尝试在边框上悬停时产生过渡效果。
h1 {color:#666;} h1:after {position:absolute ; left:10px; content:''; height:40px; width:275px; border-bottom:solid 3px#019fb6;过渡:左边250ms缓入,右边250ms缓入; opacity:0;} h1:hover:after {opacity:1;}
< h1> CSS is AWESOME< / h1>
我尝试过更改为伪元素的左侧或右侧:
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从中心起< br />< h1 class =fromRight>从右展开< / h1>< br />< h1 class =fromLeft> h1>
以最大化浏览器支持(请参阅 canIuse )。
用两行悬停时展开底边框
当文本跨越两行时,您可以实现此效果。前面的伪元素被绝对定位,以使 bottom:1.2em;
:
div class =snippetdata-lang =jsdata-hide =falsedata-console =falsedata-babel =false>
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;底部: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 /两条线< / h1>
将鼠标悬停进来时出现不同的转换方向:
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:hover:after {transform:scaleX(1); } h1.fromLeft:hover:after {transform-origin:0%50%; } h1.fromRight:hover:after {transform-origin:100%50%; }
< h1 class =fromRight> Expand从右侧开始< / h1>< br />< h1 class =fromLeft>从左侧展开 >
I'm trying to get a transition effect on border that the border expands on hover.
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>
I've tried this on Jsfiddle
解决方案 In order to expand the bottom border on hover, you can use transform:scaleX'();
(mdn reference) and transition it from 0 to 1 on the hover state.
The border and transition are set on a pseudo element to prevent transitioning the text and avoid adding markup.
To expand the bottom border from left or right, you can change the transform-origin property to the left or right of the pseudo element:
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>
Note : You need to add vendor prefixes to maximize browser support (see canIuse).
Expand bottom border on hover with 2 lines
You can achieve this effect when the text spans on 2 lines. The before pseudo element is absolutely positioned to make underline of the first line with 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>
Different transition direction on hover in and out :
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:hover:after { transform: scaleX(1); }
h1.fromLeft:hover:after{ transform-origin: 0% 50%; }
h1.fromRight:hover:after{ transform-origin: 100% 50%; }
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>
这篇关于在悬停时展开底部边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!