codepens/fishes/dist/style.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%; }
}