百度動態logo是通過循環改變div背景圖片的位置，以達到動態的效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>LOGO</title>
<style type="text/css">
#banner {
background: #52CCCC;
cursor: move;
}
.content{
height:100%;
}
html, body{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
div.moveBar { width:400px; height:300px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px; background:#f90;}
</style>
</head>
<body style="padding-top: 50px;">
<div id="logo" style="position: absolute; top: 0px; left: 50%; cursor: pointer; width: 270px; height: 129px; margin-left: -135px; background: url(logo_a5c3c8332558f4e2afafe351c4611716.png) -0px 0px no-repeat;" title="花燈流轉賞元宵"></div>
<script>
window.setInterval("changeBackground()",100);
var IMAGE_WIDTH = 16470,//圖片的寬度
PER_WIDTH = 270,//每一幀的寬度
MIN_WIDTH = -(IMAGE_WIDTH - 2 * PER_WIDTH);
function changeBackground(){
var logo = document.getElementById('logo'),
backgroundPosition,
left;
backgroundPosition = logo.style.backgroundPosition;
left = parseInt(backgroundPosition.split(' ')[0]);
left = (left > MIN_WIDTH) ? (left - PER_WIDTH) : 0;
logo.style.backgroundPosition = left + 'px 0px';
}
</script>
</body>
</html> 其中logo_a5c3c8332558f4e2afafe351c4611716.png 是對應背景圖片。
例：2016年2月22日元宵節