拆分和合并图像动画答案

【问题标题】：Split and Merge image animation拆分和合并图像动画
【发布时间】：2016-06-06 20:45:09
【问题描述】：

我想将图像分成两部分，然后在它们之间显示一个文本，然后将这些部分再次合并为一个图像，让文本淡出。

HTML：

<section id="top" class="fullscreen">
      <header class="fullscreen"><img src="img/logo.png" id="logo">
        <div class="icon-scroll"></div>
      </header>
    </section>

CSS：

#top header {
  background-size: cover;
  background-position: center;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

【问题讨论】：

只有两个单独的图像可以完成这项工作）
@markoffden 不一定，可以使用单个图像作为两个 div 的背景，同时使用width:50% 和背景位置进行剪辑
@Aziz true，使用背景位置也可以。好提示
@Aziz 我认为 markoffden 的意思是 2 个 <img>s，而不是不同的 png。
@DanielCheung 的问题很模糊，OP 没有具体说明应该采用什么方法，而且有很多。

标签： jquery html css image animation

【解决方案1】：

您可以创建图像的一半宽度和图像高度的 DIV。然后将您的图像设置为具有不同定位的背景。所以你可以这样做......

<div class="half left"></div>
<div class="half right"></div>

.half {
    width: 200px; /* half of your image width */
    height: 400px; /* your image height */ 
}

.left {
    background: url('path/to/your/image.png') top left no-repeat;
}

.right {
    background: url('path/to/your/image.png') top right no-repeat;
}

【讨论】：