在页面加载时使用 css3 /jquery 滚动圆形图像

Question

我的 div 框包含圆形图像，我想在页面加载后滚动（如地板上的滚动球）。滚动后，我想将图像放置在框的完美中心。

css:

#box{width:900px;height:150px;position:relative;background:red;overflow:hidden;}

    .ball{width:150px;height:150px;position;absolute;bottom:0;right:-150px;background:green;}

    .ball img{display:block;width:100%;height:100%;border-radius:50%;}

html:

<div id="box">
       <div class="ball><img src="http://blog.wiziq.com/wp-content/uploads/2013/11/5-150x150.png"</div>
 </div>

帮助我使用 css3/jquery 实现滚动球效果

我的编辑：

css:

.ball{
    position:absolute;width:150px;height:150px;right:-150px;
        -moz-transition:all 5s ease;
    -webkit-transition:all 5s ease;
    -o-transition:all 5s ease;
    -ms-transition:all 5s ease;
    transition:all 5s ease;
}

.rotate{-moz-transform:rotate(-940deg);
    -webkit-transform:rotate(-940deg);
    -o-transform:rotate(-940deg);
    -ms-transform:rotate(-940deg);
    transform:rotate(-940deg);}

js:

$('.ball').animate({'right':375}, {duration:500});
$('.ball').addClass('rotate');

现在我需要计算球在div框外的准确角度和正确位置，所以球的滚动完全停在了盒子的中间。请帮助我

Answer 1

将您的球 div 放入容器中。

<div class="ball-container">
    <div class="ball">...</div>
</div>

在 .ball 上使用旋转过渡，在 .ball-container 上使用水平过渡。旋转次数应该是：

（行驶距离）/Math.PI

当我使用 css3 过渡时，我使用关键帧进行定位。

@-webkit-keyframes{       /*safari and chrome */
    from { left: 270px;} 
    to { left: 1920px; } 
}

@ keyframes{             /* firefox*/
    from { left: 270px;} 
    to { left: 1920px; } 
}

开始和结束位置的设置与使用 css 定位任何元素相同。

有关如何使用过渡的提示，请查看css tricks，文章末尾有一些很好的参考资料。

Answer 2

Check this fiddle

CSS：

#box{
    width:900px;
    height:150px;
    position:relative;
    background:red;
    overflow:hidden;
}

.ball{
    width:150px;
    height:150px;
    transition:all 3s ease ;
    margin:0px auto;
}

.ball img{
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
 }

JQuery：

var s=$('.ball').position(); 
$('.ball').css({'position':'absolute'});
$('.ball').animate({'left':''+s.left+'px'});
$('.ball').css({'-moz-transform': 'rotate(360deg)'});