我很乐意使用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%;
}
要做到这一点,你必须使用photoshop或类似工具将图像分成两部分,并使用css将图像保持在一起。然后添加一个过渡,使一半在一个方向上移动而另一个图像在另一个方向上移动。
这个link可能有所帮助。
您可以将其设置为两个div
s的背景,而不是将图像分成两部分,每个background-position: left
s的大小都是整个图像的一半。左图像有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
我想知道你真正想做什么,将图像分成两部分?或者两个图像一个上升,一个下降?
如果案例有两个图像,你可以访问这个#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