时间戳

首页 > 解决方案 > 显示隐藏内容 - 外观流畅

css - 显示隐藏内容 - 外观流畅

问题描述

我整理了一个JSFiddle，我很满意它有正确的代码。如您所见，当您将鼠标悬停在“a”元素上时，我有一个 div 位于底部凸起以显示隐藏的“文本”

a {
  display: block;
  width: 200px;
}

a:hover .b {
  bottom: 0px;
}

.a {
  height: 250px;
  background-color: red;
  position: relative;
  overflow: hidden;
}

.b {
  position: absolute;
  bottom: -50px;
  background-color: yellow;
  width: 100%;
}

.c {
  height: 50px;
  background-color: green;
}
<a href="http://www.google.com">
  <div class="a">
    <div class="b">

      <div class="c">
        A title
      </div>
      <div class="c">
        Read more
      </div>

    </div>
  </div>
</a>

我的问题是底部div的显示太快了，是否有一个css属性可以让div慢慢上升？

我正在尝试复制此网站中使用的类似方法（页面下方）。

有什么想法可以实现吗？

标签： css

解决方案

在 css 中的 b 元素上添加transitioncss 属性以指定关联样式所需的时间：

.b {
  position: absolute;
  bottom: -50px;
  background-color: yellow;
  width: 100%;

  transition: bottom 1s;
  -webkit-transition: bottom 1s;
}

推荐阅读