javascript - 使用 jquery 或 CSS3 的球滚动动画

Question

是否可以更改此代码以使球滚出。 但是:

1. 指出球的数量(例如 10 个)。
2. 滚出一个球后停止，然后滚出下一个球 (并靠近另一个)。
3. 而且它们从右侧滚动到左侧。

html

<div id="balls">
    <img src="http://i058.radikal.ru/1407/0d/33cc119c6686.png" id="ball" />
</div>

CSS

body {
    background: #383838;
}
#balls {
    position: absolute;
}
#balls img {
    position: absolute;
}
#ball {
    width: 90px;
    height: 90px;
    left: 170px;
    top: 45px;
}

jQuery

var diameter = $('#ball').height(),
    perimeter = Math.PI * diameter;

var goLeft;
var times = 0;
var to = [600, 600];

function moveBalls() {
    goLeft = !goLeft;
    times++;
    if (times > to.length) {
        return false;
    }
    $('#balls').animate({
        right: to[times]
    }, {
        duration: 2000,
        step: rotateBall,
        complete: moveBalls
    });
}
moveBalls();

function rotateBall(distance) {
    var degree = distance * 360 / perimeter;
    $('#ball').css('transform', 'rotate(' + degree + 'deg)');
}

示例 Here

Answer 1

jsBin demo

为了获得更好的结果，ball 应该有 3 个元素:

• 一个用静态光源和阴影向右移动的
• 旋转内部DIV元素
• 带有数字的 SPAN -> 在旋转的 DIV 中。

像我一样使用 CSS3 过渡。

<div id="balls">
    <div class="ball blue">        <!-- THIS ONE JUST MOVES RIGHT -->
        <div><span>7</span></div>  <!-- THIS ONE ROTATES -->
    </div>
    <!-- MORE BALLS HERE -->
</div>

按照上述逻辑，CSS 最终变得非常简单:

.ball{
    position:absolute;
    left:-100px;
    width:90px;
    height:90px;
    background:#004E99;
    border-radius:50%;
    box-shadow: 20px 30px 30px -10px rgba(0,0,0,0.4);
}
.ball>div{
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
}
.ball>div>span{
    position:absolute;
    left:23px;
    top:14px;
    width:45px;
    height:45px;
    border-radius:50%;
    text-align:center;
    line-height:45px;
    font-size:24px;
    font-weight:bold;
    background:#fff;
}
/* YOUR COLORS */
.ball.blue{   background: radial-gradient(circle at 20px 20px, #09f, #001);}

JS/jQ:

var $ball = $('#balls > div'),
    diameter = $ball.height(),
    perimeter = Math.PI * diameter,
    n = $ball.length,
    i = 0,
    itv;

itv = setInterval(function(){
    if(i>n)clearInterval(itv);
    rotateBall( 500-(diameter*i) );
    i++;
},2000);

function rotateBall(distance) {
  var degree = distance * 360 / perimeter;
  $ball.eq(i).css({
    transition: "2s",
    transform: 'translateX('+ distance +'px)'
  }).find('div').css({
    transition: "2s",
    transform: 'rotate('+ degree +'deg)'    
  });
}