1

我有一个小工件。

HTML：

<div id="it">X</div>

CSS：

#it {
    background: blue;
    width: 40px;
    text-align: center;
    color: white;
    padding: 10px 0;
    border: solid 1px black;
    border-radius: 25px;
    position: absolute;
    left: 100px;
    top: 100px;
}

JS：

$('#it').animate({
    left: '+=100',
    top: '+=100'
}, 400, function() {
        $(this).animate({
        top: '-=100'
    }, 400, function() {
        $(this).animate({
            left: '-=100',
            top: '+=100'
        }, 400, function() {
            $(this).animate({
                top: '-=100'
            }, 400);
        });
    });
});

上述所有内容都放在这个jsfiddle中

我需要帮助：

  1. 循环 JS。此外，我几乎可以肯定可以做一些事情来简化重复的嵌套代码。
  2. 使运动平稳。即，使物体以单条曲线飞行，沿着“倾斜的 8”形状，而不是 4 条直线。
  3. 如果可能，摆脱 JS 并用 CSS3 替换它。

我的项目也不一定需要，但如果有一种方法可以沿途旋转对象，使其始终面向它前进的方向，那就太棒了。就像您从上方观看赛车一样。

4

2 回答 2

4

我已经将你的 JavaScript 转换为 CSS3：这是给你的。

它是循环的并使用 CSS3，可在 IE 10、chrome、firefox 和 safari 中运行。我没有歌剧，所以我无法测试，IE 9 及以下版本需要使用 CSS3 shiv。

@-webkit-keyframes move {
0%   {top:  100px;
      left: 100px;}
25%  {top:  250px;
      left: 250px;}
50%  {top:  100px;
      left: 250px;}
75%  {top:  250px;
      left: 100px;}
100% {top:  100px;
      left: 100px;}
}

该代码替换了您拥有的 JavaScript；它分段创建动画。@-moz-虽然它只是动画语法的 webkit 部分，但为了确保您涵盖所有基础，不要忘记@keyframes标准规范动画语法。

-webkit-animation:move 5s infinite;

这个 CSS3 规则告诉解析器应该使用哪个元素使用声明的动画。

旋转项目可以使用 transform css 声明来完成，我将尽快处理和更新。到目前为止，我已经让变换在每个浏览器中都可以工作。此外，我按照您的要求将整个动画倾斜了一个角度，使其看起来像一个无穷大的符号。如果没有复杂的数学或高级使用过渡和额外的动画，现在很难获得平滑的拐角转弯，我不太确定如何正确地做到这一点。我会看看能做些什么。

于 2012-12-27T20:56:05.083 回答
1

试试这个： http: //jsfiddle.net/Tn7UE/1/ 我添加transform:rotate();了改变方向。和setIntervalfor循环。

于 2012-12-27T20:54:31.063 回答