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

问题描述 投票:-2回答:3

我很乐意使用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
3个回答
0
投票

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

这个link可能有所帮助。


1
投票

您可以将其设置为两个divs的背景,而不是将图像分成两部分,每个background-position: lefts的大小都是整个图像的一半。左图像有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; }

link

1
投票

我想知道你真正想做什么,将图像分成两部分?或者两个图像一个上升,一个下降?

如果案例有两个图像,你可以访问这个#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

然后你需要动画你的图像移动,你可以使用here到你的图像。在GitHub上查看源代码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/[email protected]/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>
qazxswpoi
© www.soinside.com 2019 - 2024. All rights reserved.