body {
background: #۰۰b4ff;
color: #۳۳۳;
font: ۱۰۰% Lato, Arial, Sans Serif;
height: ۱۰۰vh;
margin: ۰;
padding: ۰;
overflow-x: hidden;
}
#background-wrap {
bottom: ۰;
left: ۰;
position: fixed;
right: ۰;
top: ۰;
z-index: -۱;
}
/* KEYFRAMES */
@-webkit-keyframes animateBubble {
۰% {
margin-top: ۱۰۰۰px;
}
۱۰۰% {
margin-top: -۱۰۰%;
}
}
@-moz-keyframes animateBubble {
۰% {
margin-top: ۱۰۰۰px;
}
۱۰۰% {
margin-top: -۱۰۰%;
}
}
@keyframes animateBubble {
۰% {
margin-top: ۱۰۰۰px;
}
۱۰۰% {
margin-top: -۱۰۰%;
}
}
@-webkit-keyframes sideWays {
۰% {
margin-left:0px;
}
۱۰۰% {
margin-left:50px;
}
}
@-moz-keyframes sideWays {
۰% {
margin-left:0px;
}
۱۰۰% {
margin-left:50px;
}
}
@keyframes sideWays {
۰% {
margin-left:0px;
}
۱۰۰% {
margin-left:50px;
}
}
/* ANIMATIONS */
.x1 {
-webkit-animation: animateBubble ۲۵s linear infinite, sideWays ۲s ease-in-out infinite alternate;
-moz-animation: animateBubble ۲۵s linear infinite, sideWays ۲s ease-in-out infinite alternate;
animation: animateBubble ۲۵s linear infinite, sideWays ۲s ease-in-out infinite alternate;
left: -۵%;
top: ۵%;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}
.x2 {
-webkit-animation: animateBubble ۲۰s linear infinite, sideWays ۴s ease-in-out infinite alternate;
-moz-animation: animateBubble ۲۰s linear infinite, sideWays ۴s ease-in-out infinite alternate;
animation: animateBubble ۲۰s linear infinite, sideWays ۴s ease-in-out infinite alternate;
left: ۵%;
top: ۸۰%;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}
.x3 {
-webkit-animation: animateBubble ۲۸s linear infinite, sideWays ۲s ease-in-out infinite alternate;
-moz-animation: animateBubble ۲۸s linear infinite, sideWays ۲s ease-in-out infinite alternate;
animation: animateBubble ۲۸s linear infinite, sideWays ۲s ease-in-out infinite alternate;
left: ۱۰%;
top: ۴۰%;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
}
.x4 {
-webkit-animation: animateBubble ۲۲s linear infinite, sideWays ۳s ease-in-out infinite alternate;
-moz-animation: animateBubble ۲۲s linear infinite, sideWays ۳s ease-in-out infinite alternate;
animation: animateBubble ۲۲s linear infinite, sideWays ۳s ease-in-out infinite alternate;
left: ۲۰%;
top: ۰;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x5 {
-webkit-animation: animateBubble ۲۹s linear infinite, sideWays ۴s ease-in-out infinite alternate;
-moz-animation: animateBubble ۲۹s linear infinite, sideWays ۴s ease-in-out infinite alternate;
animation: animateBubble ۲۹s linear infinite, sideWays ۴s ease-in-out infinite alternate;
left: ۳۰%;
top: ۵۰%;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}
.x6 {
-webkit-animation: animateBubble ۲۱s linear infinite, sideWays ۲s ease-in-out infinite alternate;
-moz-animation: animateBubble ۲۱s linear infinite, sideWays ۲s ease-in-out infinite alternate;
animation: animateBubble ۲۱s linear infinite, sideWays ۲s ease-in-out infinite alternate;
left: ۵۰%;
top: ۰;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
.x7 {
-webkit-animation: animateBubble ۲۰s linear infinite, sideWays ۲s ease-in-out infinite alternate;
-moz-animation: animateBubble ۲۰s linear infinite, sideWays ۲s ease-in-out infinite alternate;
animation: animateBubble ۲۰s linear infinite, sideWays ۲s ease-in-out infinite alternate;
left: ۶۵%;
top: ۷۰%;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}
.x8 {
-webkit-animation: animateBubble ۲۲s linear infinite, sideWays ۳s ease-in-out infinite alternate;
-moz-animation: animateBubble ۲۲s linear infinite, sideWays ۳s ease-in-out infinite alternate;
animation: animateBubble ۲۲s linear infinite, sideWays ۳s ease-in-out infinite alternate;
left: ۸۰%;
top: ۱۰%;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x9 {
-webkit-animation: animateBubble ۲۹s linear infinite, sideWays ۴s ease-in-out infinite alternate;
-moz-animation: animateBubble ۲۹s linear infinite, sideWays ۴s ease-in-out infinite alternate;
animation: animateBubble ۲۹s linear infinite, sideWays ۴s ease-in-out infinite alternate;
left: ۹۰%;
top: ۵۰%;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}
.x10 {
-webkit-animation: animateBubble ۲۶s linear infinite, sideWays ۲s ease-in-out infinite alternate;
-moz-animation: animateBubble ۲۶s linear infinite, sideWays ۲s ease-in-out infinite alternate;
animation: animateBubble ۲۶s linear infinite, sideWays ۲s ease-in-out infinite alternate;
left: ۸۰%;
top: ۸۰%;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
/* OBJECTS */
.bubble {
-webkit-border-radius: ۵۰%;
-moz-border-radius: ۵۰%;
border-radius: ۵۰%;
-webkit-box-shadow: ۰ ۲۰px ۳۰px rgba(0, ۰, ۰, ۰٫۲), inset ۰px ۱۰px ۳۰px ۵px rgba(255, ۲۵۵, ۲۵۵, ۱);
-moz-box-shadow: ۰ ۲۰px ۳۰px rgba(0, ۰, ۰, ۰٫۲), inset ۰px ۱۰px ۳۰px ۵px rgba(255, ۲۵۵, ۲۵۵, ۱);
box-shadow: ۰ ۲۰px ۳۰px rgba(0, ۰, ۰, ۰٫۲), inset ۰px ۱۰px ۳۰px ۵px rgba(255, ۲۵۵, ۲۵۵, ۱);
height: ۲۰۰px;
position: absolute;
width: ۲۰۰px;
}
.bubble:after {
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) ۰%, rgba(255,255,255,0) ۷۰%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, ۰px, center center, ۱۰۰%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) ۰%,rgba(255,255,255,0) ۷۰%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) ۰%,rgba(255,255,255,0) ۷۰%); /* Opera ۱۲+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) ۰%,rgba(255,255,255,0) ۷۰%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) ۰%,rgba(255,255,255,0) ۷۰%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#80ffffff’, endColorstr=’#00ffffff’,GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-border-radius: ۵۰%;
-moz-border-radius: ۵۰%;
border-radius: ۵۰%;
-webkit-box-shadow: inset ۰ ۲۰px ۳۰px rgba(255, ۲۵۵, ۲۵۵, ۰٫۳);
-moz-box-shadow: inset ۰ ۲۰px ۳۰px rgba(255, ۲۵۵, ۲۵۵, ۰٫۳);
box-shadow: inset ۰ ۲۰px ۳۰px rgba(255, ۲۵۵, ۲۵۵, ۰٫۳);
content: “”;
height: ۱۸۰px;
left: ۱۰px;
position: absolute;
width: ۱۸۰px;
}