html,body{ height:100%; } body{ margin:0; padding:0; background-color:black; /* background-image:url('background.png'); background-repeat:no-repeat; */ background-size:100%; } #message{ position:relative; font-size:90%; top:40%; } h1, p{ text-align:center; color:white; } * html{ height:100%; } /* position the bars and balls correctly (rotate them and translate them outward)*/ .bar1 { -moz-transform:rotate(0deg) translate(0, -40px); -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12; } .bar2 { -moz-transform:rotate(45deg) translate(0, -40px); -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25; } .bar3 { -moz-transform:rotate(90deg) translate(0, -40px); -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37; } .bar4 { -moz-transform:rotate(135deg) translate(0, -40px); -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50; } .bar5 { -moz-transform:rotate(180deg) translate(0, -40px); -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62; } .bar6 { -moz-transform:rotate(225deg) translate(0, -40px); -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75; } .bar7 { -moz-transform:rotate(270deg) translate(0, -40px); -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87; } .bar8 { -moz-transform:rotate(315deg) translate(0, -40px); -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1; } #div4 { position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px; width:100px; height:100px; -moz-border-radius:100px; -webkit-border-radius:100px; -moz-transform:scale(0.5); -webkit-transform:scale(0.5); -webkit-animation-name: rotateThis; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } #div4 div { width:20px; height:20px; background:#fff; -moz-border-radius:40px; -webkit-border-radius:40px; position:absolute; left:40px; top:40px; } /* add a shadow to the first */ #div4 div { -moz-box-shadow:black 0 0 4px; -webkit-box-shadow:black 0 0 4px; }