Space Stars Moving Effect On Mouse Over CSS3
by muthu[ Edit ] 2013-12-26 10:52:56
Space Stars Moving Effect On Mouse Over CSS3
---------------------------------------------- DEMO ----------------------------------------------------
---------------------------------------------- CSS3 ----------------------------------------------------
body { background:#000; }
.wrapper { background:url(bg.jpg) no-repeat; width:800px; height:600px; }
#background { background:url('foreground.png') 5% 5%, url('midground.png') 50% 50%; top:90px; left:0; right:0; bottom:0; position:fixed;
-webkit-transition:left 300s linear; -moz-transition:left 300s linear; -o-transition:left 300s linear; -ms-transition:left 300s linear; transition:left 300s linear; }
#experiment:target #background { left:-5000px; }
#experiment:hover #background { left:-9999px; }
.content { margin:10px; color:#fff; padding:10px; text-align:center; }
.content h2 { margin:0; font:bold 32px 'Roboto Condensed'; padding:0; }
---------------------------------------------- HTML5 ----------------------------------------------------
<div class="wrapper">
<div id="experiment">
<div id="background"></div>
<div class="content">
<h2>CSS3 Space Stars Moving Effect On Mouse Over <br>by <font color="#FFFF00">Muthujoo</font></h2>
</div>
</div>
</div>
---------------------------------------------- IMAGES ---------------------------------------------------
