图片从下往上逐渐显示

css制作从下往上逐渐显示的图片，今天和大家分享一下简单的两种，希望小伙伴们看了有所帮助。

第一种：使用额外盒子+动画效果

html代码

  <div class="box">
    <div class="placeholder"></div>
    <div class="picture"></div>
  </div>

box是整个容器，placeholder是额外盒子，picture是需要从下往上显示的div。

css代码

<style>
.box,
.placeholder {
  width: 175px;
  height: 300px;
}

.box {
  margin: 0 auto;
  overflow: hidden;
}

/* 额外的标签 */
.placeholder {
  animation: disappear 3s linear forwards;
}

/* 要显示的盒子 */
.picture {
  background: url("图片路径") no-repeat center bottom;
  background-size: 100%;
  width: 175px;
  height: 0px;
  animation: show-contents 3s linear forwards;
  /* forwards 是设置对象状态为动画结束时的状态 */
}

/* 额外的盒子 */
@keyframes disappear {
  100% {
    height: 0px;
  }
}

/* 显示图片的盒子 */
@keyframes show-contents {
  100% {
    height: 300px;
  }
}
</style>

css的主要代码是background-position：bottom的属性把背景图片给固定住，然后就是使用动画效果里面的两个盒子一个递增一个递减来达到动画效果

第二种：定位+动画效果

html代码

  <div class="box">
    <div class="placeholder">
      <div class="picture"></div>
    </div>
  </div>

css代码

<style>
.picture,
.placeholder {
  position: absolute;
  left: 0;
  width: 175px;
  height: 300px;
}

/* 父盒子 */
.placeholder {
  height: 0;
  top: 300px;
  overflow: hidden;
  animation: show-contents 3s linear forwards;
}

/* 要显示的图片 */
.picture {
  background: url("图片路径") no-repeat center bottom;
  background-size: 100%;
  bottom: 0;
}

@keyframes show-contents {
  to {
    height: 300px;
    top: 0px;
  }
}
</style>

如果只是单纯的改变picture高度的话，会导致图片是从上往下显示的，此时我们需要一个遮罩placeholder来帮助picture达成想要的效果。

三、实现的效果