Question

我一直在研究一个＆＃34;边界＆＃34;在缓慢过渡期间，在元素的左侧和右侧会遇到或者在下面/上面。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我尝试过的一种方法是在完成欠/上线转换后在h1元素上显示边框，但无法使其工作。

但我无法弄清楚我将如何获得理想的效果。

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

Answer 1

在span中加入h1之类的其他元素，并对它们产生左右效果。

例如

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

动画底部和顶部下/上线以满足

1 个答案: