Night sky is always soothing and beautiful. So why not to put this as your webpage background? The following scripts provides a night sky comprises a moon, moving clouds and twinkling stars. This 3D animating background can lead you site look different!
HTML
<!-- This script got from www.devanswer.com -->
<div class="background-container">
<img src="http://devanswer.com/codes/files/moon.png" alt="">
<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
@keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
@-webkit-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
@-moz-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
@-webkit-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
.background-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.stars {
background: black url(http://devanswer.com/codes/files/stars.png) repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
z-index: 0;
}
.twinkling {
width: 10000px;
height: 100%;
background: transparent url("http://devanswer.com/codes/files/twinkling.png") repeat;
background-size: 1000px 1000px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
-moz-animation: move-background 70s linear infinite;
-ms-animation: move-background 70s linear infinite;
-o-animation: move-background 70s linear infinite;
-webkit-animation: move-background 70s linear infinite;
animation: move-background 70s linear infinite;
}
.clouds {
width: 10000px;
height: 100%;
background: transparent url("http://devanswer.com/codes/files/clouds_repeat.png") repeat;
background-size: 1000px 1000px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 3;
-moz-animation: move-background 150s linear infinite;
-ms-animation: move-background 150s linear infinite;
-o-animation: move-background 150s linear infinite;
-webkit-animation: move-background 150s linear infinite;
animation: move-background 150s linear infinite;
}
img {
height: 70vh;
width: 70vh;
position: absolute;
z-index: 3;
right: 20px;
}
