74 lines
1.2 KiB
CSS
74 lines
1.2 KiB
CSS
.centerAll {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
#mainBG {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 80vh;
|
|
overflow: hidden;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
color: #ffffff;
|
|
}
|
|
|
|
#mainBG .wave {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100px;
|
|
background: url("/img/wave.png");
|
|
background-size: 1000px 100px;
|
|
}
|
|
|
|
#mainBG .wave.wave1 {
|
|
animation: wave-animate 30s linear infinite;
|
|
z-index: 303;
|
|
opacity: 1;
|
|
animation-delay: 0s;
|
|
bottom: 0;
|
|
}
|
|
#mainBG .wave.wave2 {
|
|
animation: wave-animate2 15s linear infinite;
|
|
z-index: 302;
|
|
opacity: 0.5;
|
|
animation-delay: -5s;
|
|
bottom: 10px;
|
|
}
|
|
#mainBG .wave.wave3 {
|
|
animation: wave-animate 30s linear infinite;
|
|
z-index: 301;
|
|
opacity: 0.2;
|
|
animation-delay: -2s;
|
|
bottom: 15;
|
|
}
|
|
#mainBG .wave.wave4 {
|
|
animation: wave-animate2 5s linear infinite;
|
|
z-index: 300;
|
|
opacity: 0.7;
|
|
animation-delay: -5s;
|
|
bottom: 20px;
|
|
}
|
|
|
|
@keyframes wave-animate {
|
|
0% {
|
|
background-position-x: 0;
|
|
}
|
|
100% {
|
|
background-position-x: 1000px;
|
|
}
|
|
}
|
|
|
|
@keyframes wave-animate2 {
|
|
0% {
|
|
background-position-x: 0;
|
|
}
|
|
100% {
|
|
background-position-x: -1000px;
|
|
}
|
|
}
|