CSS / JS-将图像分成两个动画答案

【问题标题】：CSS/JS- Split image in two animationCSS / JS-将图像分成两个动画
【发布时间】：2018-06-10 04:08:09
【问题描述】：

我很想使用 CSS 和 JS 为我的网页制作动画。我的第一个网页由一个水平和垂直居中的图像组成，我希望将这个图像分成两个图像，一个向上，一个向下，这样我的第二个网页就会出现。我只是不知道如何将图像分成两部分。

我的 HTML 基本上是由

<div class="page1">
      <img src="img/LogoEpaissiBlanc.png" alt="Logo" id="logoindex1">
</div>

和我的 CSS：

.page1 {
height: 723px;
display: table-cell;
vertical-align: middle;
}


#logoindex1{
  margin: auto;
  display: block;
width: 30%;
}

【问题讨论】：

标签： javascript html css css-transitions css-animations

【解决方案1】：

我想知道你真正想要做什么，将图像分成两部分？或两张图像，一张上，一张下？

如果是两张图片，您可以访问此link，在答案中，您将看到如何拆分为图片，如下所示：

#image {
    position: relative;
	width: 200px;
}

#half-image {
   	position: absolute;
   	top: 0;
   	left: 0;
   	width: 50%;
   	overflow: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="image">
  <img src='https://placehold.it/200x200' id='outer' class='img-responsive'>
    <div id = "half-image">
      <img src='https://placehold.it/200/e8117f' id = 'inner'>
    </div>
</div>

然后您需要为您的图像设置动画以移动，您可以使用animate.css 来处理您的图像。在 GitHub here 上查看源代码。在README 文件中，他解释了如何使用它！

#left {
  position: absolute;
  float: left;
}

#right {
  float: right;
}
    

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  -moz-animation-name: fadeOutDown;
  animation-delay: 2s;
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  -moz-animation-name: fadeOutUp;
  animation-delay: 2s;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">

<div id="left">
	<img src='https://cdn.abranhe.com/stackoverflow/48027310/left.png' class="animated fadeOutDown" >
	<div id = "right">
		<img src='https://cdn.abranhe.com/stackoverflow/48027310/right.png'  class="animated fadeOutUp" >
	</div>
</div>

【讨论】：

jsfiddle.net/#&togetherjs=PoLx0x9dhF 这是我的项目。我想要做的是将我的圆形标志分成两半。一个上升一个下降。就像它是一个打开的精灵球一样。我不知道我是否足够清楚。不过我希望。
现在我基本上得到了你想要的，我所做的是将图像切割成两张不同的图片，我将编辑我的答案，希望你能帮助你！看看吧。
也许您需要将图像正确地切成两半。

【解决方案2】：

您可以将其设置为两个divs 的背景，而不是将您的图像一分为二，每个大小为整个图像大小的一半。左图为background-position: left，右图为background-position: right;

这是一个让你入门的小提琴：https://jsfiddle.net/tf45z2cy/

#img-left, #img-right {
  background-image: url("http://placehold.it/100/100");
  width: 50px;
  height: 100px;
  float: left;
}
#img-right {
  background-position: right;
}

【讨论】：

【解决方案3】：

为此，您必须使用 Photoshop 或其他类似工具将图像分成两部分，并使用 css 将图像保存在一起。然后添加一个过渡，使一半向一个方向移动，另一半图像向另一个方向移动。

这个link 可能会有所帮助。

【讨论】：

我想过，但我想知道是否存在 CSS/JS 解决方案。