我正在开发一款网站,现在需要制作一个与http://www.elitemodel.fr/相同的介绍动画。
当这个网站加载页面时,标志和背景会向左滑动。我的客户想要这种效果在他的网站上。
目前,我已经创建了一个intro.php的网页,并使用以下HTML代码:
<div class="intro">
<div class="logo-intro"></div><!-- /.logo logo-intro -->
</div><!-- /.intro -->
<div class="black_overlay"></div><!-- /.logo logo-intro -->
我正在尝试用CSS3和一点JavaScript来完成这个。
在HTML之后,这是我的动画CSS代码:
.intro,
.intro .logo-intro {
overflow: hidden;
-moz-animation: slide 2s ease 1.5s forwards;
-webkit-animation: slide 2s ease 1.5s forwards;
-o-animation: slide 2s ease 1.5s forwards;
-ms-animation: slide 2s ease 1.5s forwards;
animation: slide 2s ease 1.5s forwards;
}
@-moz-keyframes slide /* Firefox */
{
from {width: 100%; }
to {width: 0;}
}
@-webkit-keyframes slide /* Safari and Chrome */
{
from {width: 100%;}
to {width: 0;}
}
@-o-keyframes slide /* Opera */
{
from {background: white;}
to {background: black;}
}
@-ms-keyframes slide /* IE10 */
{
from {width: 100%;}
to {width: 0;}
}
@keyframes slide
{
from {width: 100%;}
to {width: 0;}
}
}
.logo-intro {
-webkit-animation: logo 1s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: logo 1s;
animation-iteration-count: 2;
animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes logo {
from {top: 50%;}
to {left: -99999px;}
}
@keyframes logo {
from {top: 50%;}
to {left: -99999px;}
}
动画结束后,我使用JavaScript将intro.php重定向到主页。
// Your application has indicated there's an error
window.setTimeout(function(){
// Move to a new location or you can do something else
var url = "http://www.gaelscalpaesthetics.com/accueil";
$(location).attr('href',url);
}, 4000);
这个功能可以正常工作,但我如何在不重定向的情况下进行动画效果呢?
祝好,