420 lines
7.6 KiB
CSS
420 lines
7.6 KiB
CSS
/*********************************/
|
|
/* Author : Cavethemes
|
|
/* Contact : cavethemes@gmail.com
|
|
---------------------------------
|
|
----- CONTENTS
|
|
---------------------------------
|
|
| 1. CSS RESET
|
|
| 2. BASIC CSS
|
|
| 3. ANIMATED ELEMENTS
|
|
| a. WATER WAVES
|
|
| b. SUBMARINE
|
|
| c. SUBMARINE FAN
|
|
| d. SUBMARINE HEAD LIGHT
|
|
| e. BUBBLES
|
|
| 4. ANIMATION KEYFRAMES
|
|
| 5. MEDIA QUERIES
|
|
| 6. LOADING CSS
|
|
|
|
|
----------------------------------
|
|
/*********************************/
|
|
|
|
|
|
/***************************/
|
|
/****- 1. CSS RESET -******/
|
|
/*************************/
|
|
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
box-sizing: 0;
|
|
}
|
|
|
|
/***************************/
|
|
/****- 2. BASIC CSS -******/
|
|
/*************************/
|
|
|
|
body{
|
|
background: #617492;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.error{
|
|
padding: 0px;
|
|
margin-top: 60px;
|
|
z-index: 9999;
|
|
}
|
|
.error h1{
|
|
font-family: 'Open Sans', sans-serif;
|
|
color: #8699b7;
|
|
text-align: center;
|
|
font-weight: 900;
|
|
font-size: 3em;
|
|
opacity: 1;
|
|
}
|
|
.error p{
|
|
text-align: center;
|
|
font-family: 'Open Sans', sans-serif;
|
|
color: #8699b7;
|
|
padding: 15px;
|
|
}
|
|
#submarine_container{
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
fill:red;
|
|
|
|
}
|
|
#waves{
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
#canvas{
|
|
-webkit-transform: translate(400px,260px);
|
|
-ms-transform: translate(400px,260px);
|
|
transform: translate(400px,260px);
|
|
|
|
}
|
|
|
|
#bubble_group{
|
|
-webkit-transform: translate(-450px,-150px);
|
|
-ms-transform: translate(-450px,-150px);
|
|
transform: translate(-450px,-150px);
|
|
}
|
|
|
|
#svg_container{
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Navigation */
|
|
|
|
.navigation{
|
|
width: 100%;
|
|
height: 60px;
|
|
z-index: 9999;
|
|
position: absolute;
|
|
top: 185px;
|
|
}
|
|
.navigation ul{
|
|
list-style: none;
|
|
width: 260px;
|
|
margin: 0 auto;
|
|
border-radius: 0 0 5px 5px;
|
|
padding: 4px;
|
|
border-radius: 10px;
|
|
background: #5a6c89;
|
|
}
|
|
.navigation ul li{
|
|
display: inline;
|
|
|
|
}
|
|
.navigation ul li a{
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
color: #8699b7;
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-size: 1em;
|
|
padding: 5px 10px 5px 10px;
|
|
text-align: center;
|
|
}
|
|
.navigation ul li a:hover{
|
|
box-shadow: 0 0 1px rgba(0,0,0,0.1) inset;
|
|
transition: background linear .5s;
|
|
border-radius: 10px;
|
|
background: #526583;
|
|
}
|
|
|
|
|
|
/*only for IE*/
|
|
.submarine_bg_ie{
|
|
width: 700px;
|
|
margin-left: 35%;
|
|
padding-top: 120px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.submarine_waves_ie{
|
|
position: absolute;
|
|
bottom: -20px;
|
|
}
|
|
.submarine_bg_ie img{
|
|
-ms-interpolation-mode: bicubic;
|
|
interpolation-mode: bicubic;
|
|
}
|
|
|
|
/***********************************/
|
|
/****- 3. ANIMATED ELEMENTS -******/
|
|
/*********************************/
|
|
|
|
|
|
/*---- 3. a. WATER WAVES ----*/
|
|
|
|
#wave_top{
|
|
-webkit-animation: waves 3s linear infinite;
|
|
animation: waves 3s linear infinite;
|
|
}
|
|
#wave_bottom{
|
|
-webkit-animation: waves 6s linear infinite;
|
|
animation: waves 6s linear infinite;
|
|
}
|
|
|
|
/*---- 3. b. SUBMARINE ----*/
|
|
|
|
#Submarine{
|
|
|
|
-webkit-animation: submarine 4000ms linear infinite;
|
|
|
|
animation: submarine 4000ms linear infinite;
|
|
}
|
|
|
|
/*---- 3. c. SUBMARINE FAN ----*/
|
|
|
|
#fan{
|
|
-webkit-animation: spin 900ms linear infinite;
|
|
animation: spin 900ms linear infinite;
|
|
-webkit-transform-origin: 34px 34px;
|
|
-ms-transform-origin: 34px 34px;
|
|
transform-origin: 34px 34px;
|
|
}
|
|
|
|
/*---- 3. d. SUBMARINE HEAD LIGHT ----*/
|
|
|
|
#head_light{
|
|
-webkit-transform-origin: 500px 200px;
|
|
-ms-transform-origin: 500px 200px;
|
|
transform-origin: 500px 200px;
|
|
-webkit-animation: headlight 4000ms linear infinite;
|
|
animation: headlight 4000ms linear infinite;
|
|
}
|
|
|
|
.lights{
|
|
-webkit-animation: lights 2s ease-in infinite;
|
|
animation: lights 2s ease-in infinite;
|
|
}
|
|
|
|
/*---- 3. e. BUBBLES ----*/
|
|
|
|
#bubble_small{
|
|
-webkit-animation: bubble_s 2s linear infinite;
|
|
animation: bubble_s 2s linear infinite;
|
|
}
|
|
#bubble_medium{
|
|
-webkit-animation: bubble_m 2s linear infinite;
|
|
animation: bubble_m 2s linear infinite;
|
|
}
|
|
#bubble_large{
|
|
-webkit-animation: bubble_l 2s linear infinite;
|
|
animation: bubble_l 2s linear infinite;
|
|
}
|
|
|
|
|
|
/*don't worry its for IE*/
|
|
.submarine_bg_ie img{
|
|
|
|
-webkit-animation: submarine 4000ms linear infinite;
|
|
|
|
animation: submarine 4000ms linear infinite;
|
|
}
|
|
|
|
/*************************************/
|
|
/****- 4. ANIMATION KEYFRAMES -******/
|
|
/***********************************/
|
|
|
|
@-webkit-keyframes spin{
|
|
100%{
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes spin{
|
|
100%{
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes headlight{
|
|
50%{
|
|
-webkit-transform: rotate(15deg);
|
|
transform: rotate(15deg);
|
|
}
|
|
}
|
|
|
|
@keyframes headlight{
|
|
50%{
|
|
-webkit-transform: rotate(15deg);
|
|
transform: rotate(15deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes submarine{
|
|
50%{
|
|
-webkit-transform: rotate(5deg);
|
|
transform: rotate(5deg);
|
|
}
|
|
}
|
|
|
|
@keyframes submarine{
|
|
50%{
|
|
-webkit-transform: rotate(5deg);
|
|
transform: rotate(5deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes waves{
|
|
50%{
|
|
-webkit-transform: translateY(18px);
|
|
transform: translateY(18px);
|
|
}
|
|
}
|
|
|
|
@keyframes waves{
|
|
50%{
|
|
-webkit-transform: translateY(18px);
|
|
transform: translateY(18px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bubble_s{
|
|
40%{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes bubble_s{
|
|
40%{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-webkit-keyframes bubble_m{
|
|
60%{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes bubble_m{
|
|
60%{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-webkit-keyframes bubble_l{
|
|
100%{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes bubble_l{
|
|
100%{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes lights{
|
|
50%{
|
|
fill: white;
|
|
-webkit-transition: fill ease-in-out .5s;
|
|
transition: fill ease-in-out .5s;
|
|
}
|
|
}
|
|
|
|
@keyframes lights{
|
|
50%{
|
|
fill: white;
|
|
-webkit-transition: fill ease-in-out .5s;
|
|
transition: fill ease-in-out .5s;
|
|
}
|
|
}
|
|
|
|
|
|
/*************************************/
|
|
/****- 5. MEDIA QUERIES -******/
|
|
/***********************************/
|
|
|
|
@media (max-width: 1200px){
|
|
.submarine_bg_ie{
|
|
width: 500px;
|
|
margin-right: 33%;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 800px){
|
|
.submarine_bg_ie{
|
|
width: 260px;
|
|
margin: 0 auto;
|
|
}
|
|
.error h1{
|
|
font-size: 2em;
|
|
}
|
|
.navigation{
|
|
top: 160px;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 480px){
|
|
.error h1{
|
|
font-size: 1.8em;
|
|
}
|
|
.error p{
|
|
font-size: 0.8em;
|
|
}
|
|
.navigation{
|
|
top: 150px;
|
|
}
|
|
}
|
|
|
|
|
|
/*************************************/
|
|
/****- 6. LOADING CSS ---******/
|
|
/***********************************/
|
|
|
|
.spinner {
|
|
margin: 300px auto 0;
|
|
width: 70px;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
|
|
.spinner > div {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: #f0f0f0;
|
|
border-radius: 100%;
|
|
display: inline-block;
|
|
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
|
|
animation: bouncedelay 1.4s infinite ease-in-out;
|
|
/* Prevent first frame from flickering when animation starts */
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.spinner .bounce1 {
|
|
-webkit-animation-delay: -0.32s;
|
|
animation-delay: -0.32s;
|
|
}
|
|
|
|
.spinner .bounce2 {
|
|
-webkit-animation-delay: -0.16s;
|
|
animation-delay: -0.16s;
|
|
}
|
|
|
|
@-webkit-keyframes bouncedelay {
|
|
0%, 80%, 100% { -webkit-transform: scale(0.0) }
|
|
40% { -webkit-transform: scale(1.0) }
|
|
}
|
|
|
|
@keyframes bouncedelay {
|
|
0%, 80%, 100% {
|
|
transform: scale(0.0);
|
|
-webkit-transform: scale(0.0);
|
|
} 40% {
|
|
transform: scale(1.0);
|
|
-webkit-transform: scale(1.0);
|
|
}
|
|
} |