SCSS
body {
width: 100vw;
height: 100vh;
overflow: hidden;
background: #455772; /* Old browsers */
background: -moz-linear-gradient(-45deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#455772), color-stop(18%,#6b8395), color-stop(35%,#a0d0cc), color-stop(45%,#a0d0cc), color-stop(60%,#a0d0cc), color-stop(81%,#56737c), color-stop(100%,#293e56)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* IE10+ */
background: linear-gradient(135deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#455772', endColorstr='#293e56',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.accelerate {
transform: translateZ(0);
perspective: 1000;
backface-visibility: hidden;
}
.particle1 {
width: 200vw;
height: 100vh;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/particles2.png");
@extend .accelerate;
position: absolute;
z-index: 1000;
opacity: 0.45;
overflow: hidden;
animation: particleOne 200s linear infinite;
filter: blur(4px) brightness(0.9);
-webkit-filter: blur(4px) brightness(0.9);
}
.particle2 {
width: 200vw;
height: 100vh;
filter: blur(1px) hue-rotate(-8deg);
-webkit-filter: blur(1px) hue-rotate(-8deg);
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/particles3.png");
@extend .accelerate;
position: absolute;
z-index: 1000;
opacity: 0.45;
overflow: hidden;
animation: particleOne 260s linear infinite;
}
.orb {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/orb.png");
width: 500px;
height: 356px;
position: absolute;
@extend .accelerate;
left: 50%;
opacity: 0.8;
z-index: 50;
animation: orb 2s ease infinite;
}
.orb1 {
@extend .accelerate;
position: absolute;
}
.orb2 {
top: 30%;
left: 10%;
opacity: 0.85;
z-index: 50;
filter: blur(1px) hue-rotate(-8deg);
-webkit-filter: blur(1px) hue-rotate(-8deg);
animation: orb2 70s ease-out infinite;
img {
width: 40%;
height: auto;
}
}
.orb3 {
top: 4%;
left: 80%;
opacity: 0.6;
z-index: 20;
filter: blur(2px) hue-rotate(15deg);
-webkit-filter: blur(2px) hue-rotate(15deg);
animation: orb2 70s ease-out infinite;
img {
width: 30%;
height: auto;
}
}
@keyframes particleOne {
50% { transform: translateX(200%); }
}
@keyframes orb {
50% { transform: translateY(-5px); }
}
@keyframes orb2 {
50% { transform: translateX(300px); }
}
.blue {
position: absolute;
z-index: 70;
opacity: 0.2;
top: 45%;
width: 100%;
height: 10%;
box-shadow:0px 0px 50px 50px #8EB7BA;
background: #8EB7BA;
}
.land {
width: 100%;
height: auto;
bottom: 0;
position: absolute;
img {
width: 100%;
height: auto;
}
}
@media screen and ( max-height: 400px) {
.land { bottom: -55%; }
}
@media screen and ( max-width: 620px ){
.orb { left: 10% !important; }
.orb3 { left: -2% !important; }
}
1 Response