动画底部和顶部 under/overline 以满足

Question

我一直在研究一个元素，其中 "borders" 或 under/overlines 会以缓慢的过渡在元素的左侧和右侧相遇。

这是我到目前为止的进展：http://codepen.io/anon/pen/RRNjgo

.sliding-middle-out:hover {
    font-size: 30px;
    transition: font-size 2s ease;


}

.dark {
    background-color: black;
    display: inline-block;
    min-width: 200px;
    min-height: 300px;text-align: center;
    cursor: pointer;
}

.dark h1 {
    color: white;
    text-align: center;
}

.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.sliding-middle-out h1:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width 2s ease, background-color .5s ease;
}
.sliding-middle-out:hover h1:after {
    width: 50%;
    background: #b7d333;
}

.sliding-middle-out h1:before {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width 2s ease, background-color .5s ease;
}
.sliding-middle-out:hover h1:before {
    width: 50%;
    background: #b7d333;
    border-left: 1px solid black;
}

<div class="dark sliding-middle-out">
 <h1 class="">FAQs</h1>
</div>

我尝试过的一种方法是在 under/overline 过渡完成后在 h1 元素上显示边框，但无法正常工作。

但我不知道如何才能达到预期的效果。

从这里获得了这个项目的基础。 http://bradsknutson.com/blog/css-sliding-underline/

Answer 1

在 h1 中使用另一个像 span 这样的元素，并在它们上设置左右边框效果。

例如

Html

<div class="dark sliding-middle-out">
  <h1 class=""><span>FAQs</span></h1>
</div>

css

.sliding-middle-out h1 span {
  position: relative;
}

.sliding-middle-out h1 span:after,
.sliding-middle-out h1 span:before {
  content: '';
  display: block;
  margin: auto;
  width: 3px;
  transition: height 2s ease, background-color .5s ease;
  background: #B7D333;
  top: 0;
  bottom: 0;
  height: 0;
  position: absolute;
}
.sliding-middle-out h1 span:before {
  left: -5px;
}
.sliding-middle-out h1 span:after {
  right: -5px;
}
.sliding-middle-out:hover h1 span:after,
.sliding-middle-out:hover h1 span:before {
  height:50%;
}

Demo

动画底部和顶部 under/overline 以满足

Animating bottom and top under/overline to meet

html

css

animation

transition

underline