【问题标题】: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上试过这个

【问题讨论】:

    标签: css border css-transitions css-transforms


    【解决方案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>

                【讨论】:

                  猜你喜欢
                  • 2015-05-21
                  • 1970-01-01
                  • 2013-04-28
                  • 2021-06-03
                  • 2015-07-03
                  • 1970-01-01
                  • 2021-02-07
                  • 2020-01-09
                  • 1970-01-01
                  相关资源
                  最近更新 更多