悬停效果：展开底部边框

Posted

技术标签:

【中文标题】悬停效果：展开底部边框【英文标题】：Hover effect : expand bottom border 【发布时间】：2015-04-21 19:19:42 【问题描述】：

我正在尝试在边框上获得 过渡悬停效果，使边框在悬停时扩展。 

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>

我在Jsfiddle上试过这个

【问题讨论】：

【参考方案1】：

要在悬停时扩展底部边框，您可以使用transform:scaleX'(); (mdn reference) 并在悬停状态下将其从 0 转换为 1。

以下是边框悬停效果的示例：

边框和过渡设置在伪元素上，以防止文本过渡并避免添加标记。 要从左或右扩展底部边框，可以将transform-origin property更改为伪元素的左侧或右侧：

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 行

当文本跨越 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>

悬停进出不同的过渡方向：

关键是在悬停状态下将变换原点位置从一侧更改为另一侧。这样，当元素不再悬停时，底部边框在悬停时从一侧进入并在另一侧退出。 这是一个演示：

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>

【讨论】：

使用 scaleX(0.0001) 我得到了一些工件，但将其设置为 scaleX(0) 似乎可以解决这个问题。 @ChristiaanMaks 你是对的。我正在更新答案 如果你有 这是一个跨行的句子。这是一个跨两行但从第一行开始的句子 @JBis 你可以像这样做类似的事情：jsfiddle.net/vxm3b4fe/1 点击名称输入。 我正在尝试在 div 的底部使用它，但它将线条与 div 分开放置，并使其短于 div 的宽度。如何控制布局，使其保持与标准底部边框样式相同的长度和位置？【参考方案2】：

我们只能使用background 来做到这一点。不需要伪元素。这样更灵活。

h1 
  /* you can change these variables to control the border */
  --border-color: purple;
  --border-width: 5px;
  --bottom-distance: 0px; /* you can increase this */
  
  color: #666;
  display: inline-block;
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  margin: 5px 0;


.fromCenter 
  background-position: 50% calc(100% - var(--bottom-distance));


.fromRight 
  background-position: 100% calc(100% - var(--bottom-distance));


.fromLeft 
  background-position: 0 calc(100% - var(--bottom-distance))


h1:hover 
  background-size: 100% var(--border-width);

<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>

多线动画：

h1 
  /* you can change these variables to control the border */
  --border-color: purple;
  --border-width: 5px;
  --bottom-distance: 0px; /* you can increase this */
  
  color: #666;
  display: inline; /* should be 'inline' for multiple line animation */
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.5s;


.fromCenter 
  background-position: 50% calc(100% - var(--bottom-distance));


.fromRight 
  background-position: 100% calc(100% - var(--bottom-distance));


.fromLeft 
  background-position: 0 calc(100% - var(--bottom-distance))


h1:hover 
  background-size: 100% var(--border-width);

&lt;h1 class="fromLeft"&gt;Expand from &lt;br&gt;left with &lt;br&gt;multiple line&lt;/h1&gt;

【讨论】：

【参考方案3】：

简单轻量版

li 
    margin-bottom: 10px;


.cool-link 
    display: inline-block;
    color: #000;
    text-decoration: none;


.cool-link::after 
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .3s;


.cool-link:hover::after 
    width: 100%;
    //transition: width .3s;

<ul>
    <li><a class="cool-link" href="#">A cool link</a></li>
    <li><a class="cool-link" href="#">A cool link</a></li>
    <li><a class="cool-link" href="#">A cool link</a></li>
</ul>

【讨论】：

谢谢！接受的答案对我不起作用，但确实如此。如果其他人遇到问题，请尝试一下。【参考方案4】：

我知道这是一篇旧帖子，并且已经得到答复，但您可能也喜欢以下效果。 

<div class="cd-single-point">
    <a class="cd-img-replace" href="#0"></a>
</div>

   .cd-single-point 
    position: absolute;
    list-style-type: none;
    left: 20px;
    top: 20px;
  

  .cd-single-point>a 
      position: relative;
      z-index: 2;
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #0079ff;
      -webkit-transition: background-color 0.2s;
      -moz-transition: background-color 0.2s;
      -o-transition: background-color 0.2s;
      transition: background-color 0.2s;
  

  .cd-single-point::after 
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: cd-pulse 2s infinite;
  

  @keyframes cd-pulse
  
  0%  box-shadow:0 0 0 0 #0079ff
  100%box-shadow:0 0 0 20px rgba(255,150,44,0)

DEMO

【讨论】：

【参考方案5】： 

h1 
  color: #666;
  display:inline-block;
  margin:0;
  text-transform:uppercase;
 
h1:after 
  display:block;
  content: '';
  border-bottom: solid 3px #92a8d1;  
  transform: scaleX(0);  
  transition: transform 800ms ease-in-out;

h1:hover:after 
 transform: scaleX(1);

&lt;h1 class="fromCenter"&gt;Hover Over Me&lt;/h1&gt;&lt;br/&gt;

【讨论】：

【参考方案6】：

我们可以使用简单的过渡效果。

html

<h1>CSS IS AWESOME</h1>

CSS

h1 
    color: #666;
    position: relative;
    display: inline-block;


h1:after 
    position: absolute;
    left: 50%;
    content: '';
    height: 40px;
    height: 5px;
    background: #f00;
    transition: all 0.5s linear;
    width: 0;
    bottom: 0;  


h1:hover:after 
    width: 270px;
    margin-left: -135px;

链接到Fiddle

【讨论】：

【参考方案7】： 
transition: all 1000ms ease-in-out;

Demo

或者你正在寻找这个

Demo2

【讨论】：

【参考方案8】： 

h1 
  color: #666;


h1:after 
  position: absolute;
  left: 10px;
  content: '';
  height: 40px;
  width: 275px;
  border-bottom: solid 3px #019fb6;
  transition: all 550ms ease-in-out;
  border-bottom-width: 0px;


h1:hover:after 
  border-bottom-width: 5px;

&lt;h1&gt;CSS IS AWESOME&lt;/h1&gt;

【讨论】：

【参考方案9】： 

h1 
  /* you can change these variables to control the border */
  --border-color: purple;
  --border-width: 5px;
  --bottom-distance: 0px; /* you can increase this */
  
  color: #666;
  display: inline-block;
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  margin: 5px 0;


.fromCenter 
  background-position: 50% calc(100% - var(--bottom-distance));


.fromRight 
  background-position: 100% calc(100% - var(--bottom-distance));


.fromLeft 
  background-position: 0 calc(100% - var(--bottom-distance))


h1:hover 
  background-size: 100% var(--border-width);

<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>

【讨论】：

以上是关于悬停效果：展开底部边框的主要内容，如果未能解决你的问题，请参考以下文章

悬停时表格标题的边框底部

CSS底部边框悬停“抖动”

边框底部问题（悬停时向下扩展）

css 放大底部边框：悬停

悬停时的线性渐变底部边框

css 任何元素的CSS边框悬停效果