jianavi/404/css/style.css

420 lines
7.6 KiB
CSS
Raw Normal View History

2020-04-05 16:42:24 +08:00
/*********************************/
/* 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);
}
}