628 lines
12 KiB
CSS
628 lines
12 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
background: #006d77;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.container {
|
|
background: #023047;
|
|
height: 400px;
|
|
width: 300px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.container::before {
|
|
content: '';
|
|
background: #006d77;
|
|
height: 190px;
|
|
width: 500px;
|
|
top: 260px;
|
|
left: 120px;
|
|
position: absolute;
|
|
border-radius: 50px;
|
|
z-index: 99;
|
|
}
|
|
.container::after {
|
|
content: '';
|
|
background: #006d77;
|
|
height: 60px;
|
|
width: 500px;
|
|
top: 110px;
|
|
left: 120px;
|
|
position: absolute;
|
|
border-radius: 50px;
|
|
z-index: 99;
|
|
}
|
|
.fish1 {
|
|
position: relative;
|
|
top: 4px;
|
|
left: -40px;
|
|
transform: scale(.7);
|
|
animation: fish 21s infinite reverse linear;
|
|
}
|
|
.f1 {
|
|
background: rgb(248,237,235);
|
|
background: linear-gradient(90deg, rgba(248,237,235,1) 0%, rgba(227,100,20,1) 30%, rgba(248,237,235,1) 60%, rgba(227,100,20,1) 90%);
|
|
height: 20px;
|
|
width: 90px;
|
|
overflow: hidden;
|
|
border-radius: 50px;
|
|
position: absolute;
|
|
top: 20px;
|
|
}
|
|
.fin1 {
|
|
position: absolute;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: transparent;
|
|
border: 1px solid white;
|
|
height: 20px;
|
|
width: 20px;
|
|
top: 8px;
|
|
left: 30px;
|
|
}
|
|
.fin2 {
|
|
position: relative;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: transparent;
|
|
border: 1px solid white;
|
|
height: 15px;
|
|
width: 20px;
|
|
left: 80px;
|
|
top: 15px;
|
|
}
|
|
.fin2::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: transparent;
|
|
border: 1px solid white;
|
|
height: 14px;
|
|
width: 19px;
|
|
top: 12px;
|
|
transform: rotate(45deg);
|
|
}
|
|
.e1 {
|
|
position: relative;
|
|
background: #e36414;
|
|
border-radius: 100%;
|
|
height: 9px;
|
|
width: 9px;
|
|
left: 8px;
|
|
top: 5px;
|
|
}
|
|
.e1::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: #333;
|
|
border-radius: 100%;
|
|
height: 5px;
|
|
width: 5px;
|
|
left: 2.3px;
|
|
top: 1.8px;
|
|
}
|
|
.nose {
|
|
position: absolute;
|
|
border-radius: 100%;
|
|
background: #333;
|
|
height: 3px;
|
|
width: 3px;
|
|
left: 2px;
|
|
}
|
|
.fish2 {
|
|
position: relative;
|
|
top: 30px;
|
|
left: -60px;
|
|
transform: scale(.6);
|
|
animation: fish 35s infinite reverse linear;
|
|
}
|
|
.f2 {
|
|
background: rgb(248,237,235);
|
|
background: linear-gradient(180deg, rgba(248,237,235,1) 0%, rgba(237,163,119,1) 32%, rgba(227,100,20,1) 74%);
|
|
position: absolute;
|
|
overflow: hidden;
|
|
height: 70px;
|
|
width: 90px;
|
|
border-radius: 100%;
|
|
}
|
|
.e2 {
|
|
position: relative;
|
|
background: #fff;
|
|
border-radius: 100%;
|
|
height: 19px;
|
|
width: 19px;
|
|
left: 18px;
|
|
top: 15px;
|
|
}
|
|
.e2::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: #333;
|
|
border-radius: 100%;
|
|
height: 12px;
|
|
width: 12px;
|
|
left: 3.6px;
|
|
top: 3.6px;
|
|
}
|
|
.nose1 {
|
|
position: absolute;
|
|
border-radius: 100%;
|
|
background: #333;
|
|
height: 4px;
|
|
width: 4px;
|
|
left: 6px;
|
|
top: 35px;
|
|
}
|
|
.fin3 {
|
|
position: relative;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: #028090;
|
|
height: 20px;
|
|
width: 30px;
|
|
left: 80px;
|
|
top: 35px;
|
|
}
|
|
.fin3::before {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: #028090;
|
|
height: 20px;
|
|
width: 30px;
|
|
top: 15px;
|
|
left: 0px;
|
|
transform: rotate(20deg);
|
|
}
|
|
.fin3::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: #028090;
|
|
height: 20px;
|
|
width: 25px;
|
|
top: 30px;
|
|
transform: rotate(45deg);
|
|
}
|
|
.fish3 {
|
|
position: relative;
|
|
top: 90px;
|
|
left: -70px;
|
|
transform: scale(.7);
|
|
animation: fish 40s infinite linear;
|
|
}
|
|
.f3 {
|
|
background: rgb(248,237,235);
|
|
background: linear-gradient(270deg, rgba(248,237,235,1) 16%, rgba(20,69,82,1) 45%);
|
|
position: absolute;
|
|
overflow: hidden;
|
|
height: 40px;
|
|
width: 120px;
|
|
left: 60px;
|
|
border-radius: 85% 100% 100% 85%;
|
|
}
|
|
.e3 {
|
|
position: relative;
|
|
background: orange;
|
|
border-radius: 100%;
|
|
height: 15px;
|
|
width: 15px;
|
|
left: 88px;
|
|
top: 10px;
|
|
}
|
|
.e3::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: #333;
|
|
border-radius: 100%;
|
|
height: 8px;
|
|
width: 8px;
|
|
left: 3.6px;
|
|
top: 3.6px;
|
|
}
|
|
.nose2 {
|
|
position: absolute;
|
|
border-radius: 100%;
|
|
background: #333;
|
|
height: 4px;
|
|
width: 4px;
|
|
left: 110px;
|
|
top: 20px;
|
|
}
|
|
.fin4 {
|
|
position: relative;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: orange;
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 45px;
|
|
top: 36px;
|
|
transform: rotate(180deg);
|
|
}
|
|
.fin4::before {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: orange;
|
|
height: 20px;
|
|
width: 20px;
|
|
top: 10px;
|
|
transform: rotate(85deg);
|
|
}
|
|
.fin4::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: transparent;
|
|
border: 1px solid white;
|
|
height: 24px;
|
|
width: 20px;
|
|
left: -60px;
|
|
top: 23px;
|
|
transform: rotate(85deg);
|
|
}
|
|
.fish4 {
|
|
position: relative;
|
|
top: 130px;
|
|
left: -85px;
|
|
transform: scale(.6);
|
|
animation: fish 28s infinite linear;
|
|
}
|
|
.f4 {
|
|
background: rgb(248,237,235);
|
|
background: linear-gradient(0deg, rgba(248,237,235,1) 0%, rgba(20,69,82,1) 98%);
|
|
position: absolute;
|
|
overflow: hidden;
|
|
height: 50px;
|
|
width: 130px;
|
|
left: 60px;
|
|
border-radius: 85% 100% 100% 85%;
|
|
}
|
|
.e4 {
|
|
position: relative;
|
|
background: orange;
|
|
border-radius: 100%;
|
|
height: 15px;
|
|
width: 15px;
|
|
left: 98px;
|
|
top: 15px;
|
|
}
|
|
.e4::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: #333;
|
|
border-radius: 100%;
|
|
height: 8px;
|
|
width: 8px;
|
|
left: 3.6px;
|
|
top: 3.6px;
|
|
}
|
|
.nose3 {
|
|
position: absolute;
|
|
border-radius: 100%;
|
|
background: #333;
|
|
height: 4px;
|
|
width: 4px;
|
|
left: 118px;
|
|
top: 25px;
|
|
}
|
|
.fin5 {
|
|
position: relative;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: orange;
|
|
height: 10px;
|
|
width: 20px;
|
|
left: 45px;
|
|
top: 36px;
|
|
transform: rotate(180deg);
|
|
}
|
|
.fin5::before {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: orange;
|
|
height: 10px;
|
|
width: 20px;
|
|
top: 7px;
|
|
transform: rotate(20deg);
|
|
}
|
|
.fin5::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: orange;
|
|
height: 10px;
|
|
width: 20px;
|
|
left: 0px;
|
|
top: 15px;
|
|
transform: rotate(35deg);
|
|
}
|
|
.fin6 {
|
|
position: absolute;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: orange;
|
|
height: 24px;
|
|
width: 30px;
|
|
left: 100px;
|
|
top: -5px;
|
|
transform: rotate(230deg);
|
|
}
|
|
.fish5 {
|
|
position: relative;
|
|
top: 160px;
|
|
left: -85px;
|
|
transform: scale(.6);
|
|
animation: fish 20s infinite linear;
|
|
}
|
|
|
|
.f5 {
|
|
background: rgb(250,163,7);
|
|
background: linear-gradient(180deg, rgba(250,163,7,1) 52%, rgba(180,171,61,1) 77%, rgba(82,183,136,1) 100%);
|
|
position: absolute;
|
|
overflow: hidden;
|
|
height: 60px;
|
|
width: 80px;
|
|
left: 60px;
|
|
border-radius: 100%;
|
|
}
|
|
.e5 {
|
|
position: relative;
|
|
background: white;
|
|
border-radius: 100%;
|
|
height: 15px;
|
|
width: 15px;
|
|
left: 108px;
|
|
top: 15px;
|
|
}
|
|
.e5::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: #333;
|
|
border-radius: 100%;
|
|
height: 8px;
|
|
width: 8px;
|
|
left: 3.6px;
|
|
top: 3.6px;
|
|
}
|
|
.nose4 {
|
|
position: absolute;
|
|
border-radius: 100%;
|
|
background: #333;
|
|
height: 4px;
|
|
width: 4px;
|
|
left: 128px;
|
|
top: 45px;
|
|
}
|
|
.fin7 {
|
|
position: relative;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: #3f37c9;
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 48px;
|
|
top: 40px;
|
|
transform: rotate(220deg);
|
|
}
|
|
.fin7::before {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: #3f37c9;
|
|
height: 15px;
|
|
width: 15px;
|
|
top: -8px;
|
|
left: -5px;
|
|
transform: rotate(-20deg);
|
|
}
|
|
.fin7::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: #3f37c9;
|
|
height: 10px;
|
|
width: 20px;
|
|
left: 10px;
|
|
top: 11px;
|
|
transform: rotate(-15deg);
|
|
}
|
|
.fish6 {
|
|
position: relative;
|
|
top: 180px;
|
|
left: -85px;
|
|
transform: scale(.6);
|
|
animation: fish 30s infinite linear;
|
|
}
|
|
.f6 {
|
|
background: rgb(15,76,92);
|
|
background: linear-gradient(90deg, rgba(15,76,92,1) 4%, rgba(251,133,0,1) 22%, rgba(15,76,92,1) 39%, rgba(251,133,0,1) 57%, rgba(15,76,92,1) 76%, rgba(254,250,224,1) 93%);
|
|
position: absolute;
|
|
overflow: hidden;
|
|
height: 50px;
|
|
width: 130px;
|
|
left: 60px;
|
|
border-radius: 100%;
|
|
}
|
|
.e6 {
|
|
position: relative;
|
|
background: white;
|
|
border-radius: 100%;
|
|
height: 15px;
|
|
width: 15px;
|
|
left: 162px;
|
|
top: 15px;
|
|
}
|
|
.e6::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: #333;
|
|
border-radius: 100%;
|
|
height: 8px;
|
|
width: 8px;
|
|
left: 3.6px;
|
|
top: 3.6px;
|
|
}
|
|
.nose5 {
|
|
position: absolute;
|
|
border-radius: 100%;
|
|
background: #333;
|
|
height: 4px;
|
|
width: 4px;
|
|
left: 178px;
|
|
top: 45px;
|
|
}
|
|
.fin8 {
|
|
position: relative;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: #0f4c5c;
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 48px;
|
|
top: 43px;
|
|
transform: rotate(220deg);
|
|
}
|
|
.fin8::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 100% 32% 100% 0%;
|
|
background: #0f4c5c;
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 10px;
|
|
top: 11px;
|
|
transform: rotate(12deg);
|
|
}
|
|
.fin9 {
|
|
position: absolute;
|
|
border-radius: 100% 0% 100% 32%;
|
|
background: transparent;
|
|
border: 1px solid white;
|
|
height: 20px;
|
|
width: 30px;
|
|
top: 65px;
|
|
left: 110px;
|
|
transform: rotate(12deg);
|
|
}
|
|
.b1 {
|
|
position: absolute;
|
|
background: rgb(77,144,142);
|
|
background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%);
|
|
height: 60px;
|
|
width: 20px;
|
|
border-radius: 100% 30%;
|
|
left: 230px;
|
|
top: 210px;
|
|
opacity: 0.5;
|
|
}
|
|
.b2 {
|
|
position: absolute;
|
|
background: rgb(77,144,142);
|
|
background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%);
|
|
height: 40px;
|
|
width: 20px;
|
|
border-radius: 100% 30%;
|
|
left: 250px;
|
|
top: 220px;
|
|
opacity: 0.5;
|
|
transform: rotate(35deg);
|
|
}
|
|
.b3 {
|
|
position: absolute;
|
|
background: rgb(77,144,142);
|
|
background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%);
|
|
height: 60px;
|
|
width: 10px;
|
|
border-radius: 100% 30%;
|
|
left: 215px;
|
|
top: 210px;
|
|
opacity: 0.5;
|
|
transform: rotate(-35deg);
|
|
}
|
|
.b4 {
|
|
position: absolute;
|
|
background: rgb(77,144,142);
|
|
background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%);
|
|
height: 60px;
|
|
width: 20px;
|
|
border-radius: 100% 30%;
|
|
left: 100px;
|
|
top: 350px;
|
|
opacity: 0.5;
|
|
}
|
|
.b5 {
|
|
position: absolute;
|
|
background: rgb(77,144,142);
|
|
background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%);
|
|
height: 40px;
|
|
width: 20px;
|
|
border-radius: 100% 30%;
|
|
left: 80px;
|
|
top: 360px;
|
|
opacity: 0.5;
|
|
transform: rotate(5deg);
|
|
}
|
|
.b6 {
|
|
position: absolute;
|
|
background: rgb(77,144,142);
|
|
background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%);
|
|
height: 60px;
|
|
width: 10px;
|
|
border-radius: 100% 30%;
|
|
left: 65px;
|
|
top: 350px;
|
|
opacity: 0.5;
|
|
transform: rotate(-35deg);
|
|
}
|
|
.b7 {
|
|
position: absolute;
|
|
background: rgb(77,144,142);
|
|
background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%);
|
|
height: 60px;
|
|
width: 10px;
|
|
border-radius: 100% 30%;
|
|
left: 5px;
|
|
top: 50px;
|
|
opacity: 0.5;
|
|
transform: rotate(35deg);
|
|
}
|
|
.b8 {
|
|
position: absolute;
|
|
background: rgb(77,144,142);
|
|
background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%);
|
|
height: 60px;
|
|
width: 10px;
|
|
border-radius: 100% 30%;
|
|
left: 5px;
|
|
top: 37px;
|
|
opacity: 0.5;
|
|
transform: rotate(25deg);
|
|
}
|
|
.b9 {
|
|
position: absolute;
|
|
background: rgb(77,144,142);
|
|
background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%);
|
|
height: 20px;
|
|
width: 50px;
|
|
border-radius: 100% 30%;
|
|
left: 165px;
|
|
top: 80px;
|
|
opacity: 0.5;
|
|
transform: rotate(-35deg);
|
|
}
|
|
.b10 {
|
|
position: absolute;
|
|
background: rgb(77,144,142);
|
|
background: linear-gradient(180deg, rgba(77,144,142,1) 20%, rgba(38,57,59,1) 83%);
|
|
height: 60px;
|
|
width: 30px;
|
|
border-radius: 100% 30%;
|
|
left: 155px;
|
|
top: 55px;
|
|
opacity: 0.5;
|
|
transform: rotate(-35deg);
|
|
}
|
|
@keyframes fish {
|
|
from { margin-left: -50%; }
|
|
to { margin-left: 150%; }
|
|
} |