Question

我正在努力制作我正在制作的网站所需的动画，我希望这里有人可以提供帮助。下面是这样的情况：客户希望网站的索引页面是一个“保险库”，当点击“输入”链接时它会打开，它需要是一个非常具体的设计，我会试着描述为我新的，不能发布图像。屏幕垂直划分，左侧为DIV-b，右侧为DIV C.浮在上面的是DIV-A，其中包含圆形图像或保险柜锁，如果您愿意的话。

#DIV-B {
position:relative;
top:0px;
width:50%;
float:left;
height:950px;
z-index:2;
background-image:url(../images/vault-bg-left.jpg);
background-position:right;
overflow:hidden;
}

#DIV-C {
position:relative;
top:0px;
width:50%;
float:right;
height:950px;
z-index:2;
background-image:url(../images/vault-bg-right.jpg);
background-position:left;
overflow:hidden;
}

#DIV-A {
position:relative;
top:150px;
margin:0 auto;
z-index:3;
margin:0 auto;
}

我已经将图像分解并且DIV正确对齐;需要发生的是当点击“输入”链接时（在DIV-A中），DIV-A（或DIV本身）中的图像将顺时针旋转180度，紧接着DIV-A和DIV B滑动向右移动，DIV-C向右滑动，在下方显示另一个DIV（D，我猜）。

我假设jQuery动画和Mootools链接是要走的路，但说实话，这种事情对我来说有点新鲜，所以我希望有人能够帮助我解决它。在此先感谢您的帮助！

Answer 1

您可以使用jQuery动画手动编写脚本，但这将是很多工作。幸运的是，HTML5动画创作工具开始在市场上出现，值得一看。

http://labs.adobe.com/technologies/edge/

http://www.sencha.com/products/animator

Answer 2

我会使用jQuery和CSS3关键帧动画的组合......虽然它不能在IE8及以下版本中使用。我没有对此进行过测试，但理论上它应该可行。如果需要修改，请告诉我。

.open-lock { transform: rotate(180deg) }
.slide-left { left: -1000px }
.slide-right { right: -1000px }
#DIV-A, #DIV-B, #DIV-C, .open-lock { transition: all 3s ease-in-out }

和jQuery

$('#enter-link').click(function(){
    $('#DIV-A').addClass('open-lock');

    setTimeout(function(){
        $('#DIV-B').addClass('slide-left');
        $('#DIV-C').addClass('slide-right');
    },3000)
});

说明：当您单击ID为“enter-link”的链接时，会向＃DIV-A添加一个“open-lock”类，它将使用CSS旋转到180度。此动画将需要3秒钟。同时setTimeout（）函数已设置为3秒，该函数将在旋转完成后立即执行。此函数向DIV B和C添加类，这将导致它们的相对位置发生变化，将它们滑出视口。

如果您希望动画的持续时间更长或更短，您可以在不同的DIV上设置单独的过渡属性。

如果您想要与旧版本的firefox和safari有一些向后兼容性，也可以添加浏览器特定的前缀。 -moz-transition :, - webkit-transition :,和transform相同。

图像/ DIV动画+事件链接

2 个答案: