CSS案例：动画实现繁星漂移

来自CloudWiki
跳转至： 导航， 搜索 
<!doctype html>
<html>
<head>
<title>ÐÇ¿Õ</title>
<style type="text/css">
html,body{margin: 0; }
.wall
{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

@keyframes starmove
{
   from {background-position: 0% 0%;}
   to {background-position: 600% 0%;}
}
div#background 
{
    background: black url('img/background.png') repeat-x 5% 0%;
    animation: starmove 200s linear infinite;
}
div#midground 
{
    background: url('img/midground.png') repeat 20% 0%;
    z-index: 1;
    animation: starmove 100s linear infinite;
}
div#foreground
{
    background: url('img/foreground.png') repeat 35% 0%;
    z-index: 2;
    animation: starmove 50s linear infinite;
}
</style>
</head>
<body>
<div id="background" class="wall"></div>
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=CSS案例：动画实现繁星漂移&oldid=16134”