Cool Effect!
HTML:
1 2 3 | <div class="stars"></div> <div class="twinkling"></div> <div class="clouds"></div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | /* =======Nick Mkrtchyan================================================================================================= */ * { margin: 0; padding: 0; } header { background-color:rgba(33, 33, 33, 0.9); color:#ffffff; display:block; font: 14px/1.3 Arial,sans-serif; height:50px; position:relative; z-index:5; } h2{ margin-top: 30px; text-align: center; } header h2{ font-size: 22px; margin: 0 auto; padding: 10px 0; width: 80%; text-align: center; } header a, a:visited { text-decoration:none; color:#fcfcfc; } @keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-webkit-keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-moz-keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-ms-keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @keyframes move-clouds-back { from {background-position:0 0;} to {background-position:10000px 0;} } @-webkit-keyframes move-clouds-back { from {background-position:0 0;} to {background-position:10000px 0;} } @-moz-keyframes move-clouds-back { from {background-position:0 0;} to {background-position:10000px 0;} } @-ms-keyframes move-clouds-back { from {background-position: 0;} to {background-position:10000px 0;} } .stars, .twinkling, .clouds { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; display:block; } .stars { background:#000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center; z-index:0; } .twinkling{ background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center; z-index:1; -moz-animation:move-twink-back 200s linear infinite; -ms-animation:move-twink-back 200s linear infinite; -o-animation:move-twink-back 200s linear infinite; -webkit-animation:move-twink-back 200s linear infinite; animation:move-twink-back 200s linear infinite; } .clouds{ background:transparent url(http://www.script-tutorials.com/demos/360/images/clouds3.png) repeat top center; z-index:3; -moz-animation:move-clouds-back 200s linear infinite; -ms-animation:move-clouds-back 200s linear infinite; -o-animation:move-clouds-back 200s linear infinite; -webkit-animation:move-clouds-back 200s linear infinite; animation:move-clouds-back 200s linear infinite; } |
http://codepen.io/WebSonick/pen/vjmgu/