谷歌主页动画效果——利用视距暂留原理

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>谷歌主页动画</title>

<style type="text/css">

.animate{

    height:156px;

    width:97px;

    background:url(http://images.cnblogs.com/cnblogs_com/siqi/429485/o_gumby11-gumby.jpg) no-repeat;

    background-position:-15581px center;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(e) {

    var offset = -15678;

    var timer = setInterval(function(){

        offset+=98;

        $("#animate").css({'background-position':offset + 'px center'});

        if(offset>0){

            clearInterval(timer);

        }

    },50);

});

</script>

</head>

<body>

    <div id="animate" class="animate"></div>

</body>

</html>

 

效果图:

  谷歌主页动画效果——利用视距暂留原理

 

 

你可能感兴趣的:(动画)