Question

是否可以更改此代码以便滚出球。但是：

表示球的数量（例如10）。
一旦推出一个球并停下来，然后推出下一个球（并接近另一个）。
他们从右侧滚动到左侧。

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

enter image description here

为了获得更好的结果，您应该为ball提供3个元素：

使用静态光源和阴影向右移动
旋转内部DIV元素
具有数字的SPAN - ＆gt;在旋转的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)'    
  });
}

使用jquery或CSS3滚动动画

1 个答案: