css - 如何使 CSS3 过渡适用于从下到上开始的 border-bottom 属性-6ren

css - 如何使 CSS3 过渡适用于从下到上开始的 border-bottom 属性

转载作者：太空宇宙更新时间：2023-11-03 21:23:06

25

4

我在下面有 2 个示例，它们显示 4 个链接并将鼠标悬停在它们上面显示边框底部，效果很轻松。

在示例 1 中，border-bottom 从上到下显示。我已经尝试使用示例 2 中的 padding 属性，它在浏览器中不一致并且不能正常工作。

示例1:转换默认功能(从上到下转换)

  <!DOCTYPE html><html class=''>
  <head>

  <style class="cp-pen-styles">
  body {
    padding: 50px;
  }

  a, a:hover {
    text-decoration: none;
  }

  li {
    position: relative;
    padding-bottom: 3px;
    margin-right: 10px;
    display: inline;
  }

  li a {
    border-bottom: 0em solid transperant;
    color: #777;
  }

  li:focus > a,
  li:hover > a,
  li:active > a {
      border-bottom: 0.313em solid #206E9F;
      transition: border-bottom .2s ease-in-out;
      -webkit-transition: border-bottom .2s ease-in-out;
      -moz-transition: border-bottom .2s ease-in-out;
      -ms-transition: border-bottom .2s ease-in-out;
  }
|
</style>
</head>
<body>


  <ul>
    <li><a href="#home">HOME</a></li>
    <li><a href="#page">PAGE</a></li>
    <li><a href="#about">ABOUT US</a></li>
    <li><a href="#contact-me">CONTACT US</a></li>
  </ul>


  </body>
  </html>

示例 2:从下到上的过渡(使用填充 - 与 IE 浏览器的兼容性问题)

<!DOCTYPE html><html class=''>

<head>

<style class="cp-pen-styles">
body {
  padding: 50px;
}

a, a:hover {
  text-decoration: none;
}

li {
    position: relative;
    padding-bottom: 3px;
    margin-right: 10px;
    display: inline;
}

li a {
    color: #777;
    padding-bottom:0.4em;
    border-bottom: 0em solid transperant;
}

li:focus > a,
li:hover > a,
li:active > a {
    padding-bottom:0em;
    border-bottom: 0.313em solid #206E9F;
    transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -ms-transition: all .2s ease-in;
}

</style></head><body>


<ul>
  <li><a href="#home">HOME</a></li>
  <li><a href="#page">PAGE</a></li>
  <li><a href="#about">ABOUT US</a></li>
  <li><a href="#contact-me">CONTACT US</a></li>
</ul>


</body></html>

如何使 CSS3 过渡适用于从下到上开始的 border-bottom 属性。

最佳答案

您可以使用 :after 模拟您想要的结果或 :before伪元素。这样您就可以更好地控制所需的效果(例如添加各种变换)。

body {
  padding: 50px;
}

a {
  text-decoration: none;
}

li {
  display: inline;
  margin-right: 10px;
}

li a {
  border-bottom: 0 solid transparent;
  color: #777;
  display: inline-block;

  padding-bottom: 3px;
  position: relative;
}

li a > .fancy-line {
  background-color: transparent;
  content: "";
  display: block;
  height: 0;

  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  -o-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
}

li a:hover > .fancy-line {
  background-color: #206E9F;
  height: 3px;
}

<ul>
    <li><a href="#home">HOME <span class="fancy-line"></span></a></li>
    <li><a href="#page">PAGE <span class="fancy-line"></span></a></li>
    <li><a href="#about">ABOUT US <span class="fancy-line"></span></a></li>
    <li><a href="#contact-me">CONTACT US <span class="fancy-line"></span></a></li>
</ul>

关于css - 如何使 CSS3 过渡适用于从下到上开始的 border-bottom 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35593658/

25

4