Question

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

我的HTML基本上由

组成

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


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

和我的CSS：

View

Answer 1

您可以将其设置为两个div的背景，而不是将图像分成两部分，每个background-position: left的大小都是整个图像的一半。左侧图片为background-position: right;，右侧图片为#img-left, #img-right { background-image: url("http://placehold.it/100/100"); width: 50px; height: 100px; float: left; } #img-right { background-position: right; }

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

$(document).on('click', '.Downline_button', function(){
            debugger;
            var id = this.id;
});

Answer 2

我想知道你真正想做什么，将图片分成两部分？或两张图片一张上升，另一张下降？

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 3

要做到这一点，你必须使用photoshop或类似的工具将图像分成两部分，并使用css将图像保持在一起。然后添加一个过渡，使一半移动到一个方向，另一个移动到另一个方向。

这link可能会有所帮助。

CSS / JS-在两个动画中分割图像

3 个答案: