如何使用css3从上到下显示图像

Question

是否可以使用css3动画从下到上显示图像？ 应该只在动画结束时显示完整图像。

Answer 1

您可以为此使用伪元素（悬停灰色区域）：

＆＃13;

＆＃13;

div {
  position: relative;
  height: 300px;
  width: 300px;
  background: url(http://placehold.it/300/300);
  overflow:hidden;
}
div:before {
  transition: all 1.2s;
  background: gray;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
div:hover:before{
  top:100%;
  }

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;