0

我需要制作一个动画，类似于下一个网站的“让人们快乐”部分中的动画：

https://layervault.com/

但是，我需要做一个简单的圆圈，而不是制作一个八的形式。它是使用 CSS3 制作的，但我也可以使用 jQuery 来完成（如果我得到想要的结果，我不介意这种技术）。

我发现这段代码在 jQuery 中产生了类似的效果：

var t = 0;

function moveit() {
t += 0.05;

var r = 100;
var xcenter = 100;
var ycenter = 100;
var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
var newTop = Math.floor(ycenter + (r * Math.sin(t)));

$('.rotate').animate({
    top: newTop,
    left: newLeft,
}, 1, function() {
    moveit();
});
}

$(document).ready(function() {
    moveit();
});

在 jsfiddle 中查看：http: //jsfiddle.net/W69s6/810/

但正如您将看到的，这个例子正在做连续循环，我想移动图像做混蛋。我的意思是，每秒停止和启动。

此外，我还会同时旋转更多图像，例如本文开头 layervault.com 提供的示例。

你能给我一些建议或例子来获得这种特殊的效果吗？

提前致谢。

4

2 回答 2

1

在他们的网站上，他们使用 CSS3 动画（带有每个适当的供应商前缀）。我使用 Chrome 的 Web 控制台来选择其中一个动画元素。你会看到他们animation name有财产。

该名称对应@keyframes于他们的 CSS 文件中的指令（您也需要供应商前缀）。

这里和这里有一些信息。

于 2013-03-14T20:16:31.990 回答
0

您可以尝试添加延迟以获得所需的效果

$('.rotate').delay(1000).animate({
    //rest of code
}....
于 2013-03-14T20:07:26.617 回答