1 /*移动的星星 animation*/ 2 @keyframes star_yidong{ 3 0 %{ background-position:0% 0%; background-color:#fff;} 4 50 %{ background-position:50% 0%; background-color:#CCC;} 5 100%{ background-position:100% 0%; background-color:#000;} 6 } 7 @-webkit-keyframes star_yidong{ 8 0 %{ background-position:0% 0%; background-color:#fff;} 9 50 %{ background-position:50% 0%; background-color:#CCC;} 10 100%{ background-position:100% 0%; background-color:#000;} 11 } 12 @-moz-keyframes star_yidong{ 13 0 %{ background-position:0% 0%; background-color:#fff;} 14 50 %{ background-position:50% 0%; background-color:#CCC;} 15 100%{ background-position:100% 0%; background-color:#000;} 16 } 17 @-o-keyframes star_yidong{ 18 0 %{ background-position:0% 0%; background-color:#fff;} 19 50 %{ background-position:50% 0%; background-color:#CCC;} 20 100%{ background-position:100% 0%; background-color:#000;} 21 } 22 .move_star{ position:relative; width:100%; height:600px; margin:0 auto; margin-top:20px} 23 .star_01{ position:absolute; left:0; right:0; top:0; bottom:0; margin:auto} 24 #xing01{ 25 background:url(img/background.png) repeat; z-index:4; 26 animation:star_yidong 60s linear infinite; 27 -webkit-animation:star_yidong 60s linear infinite; 28 -moz-animation:star_yidong 60s linear infinite; 29 -o-animation:star_yidong 60s linear infinite; 30 } 31 #xing02{ 32 background:url(img/foreground.png) repeat; z-index:4; 33 animation:star_yidong 80s linear infinite; 34 -webkit-animation:star_yidong 80s linear infinite; 35 -moz-animation:star_yidong 80s linear infinite; 36 -o-animation:star_yidong 80s linear infinite; 37 } 38 #xing03{ 39 background:url(img/midground.png) repeat; z-index:4; 40 animaition:star_yidong 100s ease-in infinite; 41 -webkit-animation:star_yidong 100s ease-in infinite; 42 -moz-animation:star_yidong 100s ease-in infinite; 43 -o-animation:star_yidong 100s ease-in infinite; 44 } 45 /*闪动的星星*/ 46 #xing04{ 47 background:url(img/stars.png) repeat; z-index:4; 48 } 49 #xing05{ 50 background:url(img/twinkling.png) repeat; z-index:4; 51 animaition:move-twink-back 200s linear infinite; 52 -webkit-animation:move-twink-back 200s linear infinite; 53 -moz-animation:move-twink-back 200s linear infinite; 54 -o-animation:move-twink-back 200s linear infinite; 55 } 56 @keyframes move-twink-back { 57 from {background-position:0 0;} 58 to {background-position:1000px 5000px;} 59 } 60 @-webkit-keyframes move-twink-back { 61 from {background-position:0 0;} 62 to {background-position:1000px 5000px;} 63 } 64 @-moz-keyframes move-twink-back { 65 from {background-position:0 0;} 66 to {background-position:1000px 5000px;} 67 }

学无止境，乐在其中

css参考手册：

属性借鉴来源：