Witam!
Jestem w trakcie robienia takiej oto animacji meduzy w cssie
HtML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>jellyfish</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" >
<script src="main.js"> </script>
</head>
<body>
<div class="jellyfish">
<div class="head">
<div class="head2">
</div>
<div class="semihead2">
</div>
<div class="insideHead"> </div>
<div class="Weird"></div>
</div>
<div class= "leg1">
<div class= "up"></div>
<div class="middle"> </div>
</div>
<div class= "leg2">
<div class= "up"></div>
<div class="middle"> </div>
</div>
<div class= "leg3">
<div class= "up2"></div>
<div class="middle2"></div>
</div>
<div class= "leg4">
<div class= "up2"></div>
<div class="middle2"></div>
</div>
</div>
<div class="tail">
<li> <div class="bubble"><div class="shine"></div></div></li>
</div>
</body>
</html>
CSS
body{
background-color:#000c1a;
}
.up, .middle, .middle2, .up2{
width: 7.5px;
height: 120px;
background-color: white;
position: absolute;
margin: auto;
top: 10px;
right: 60px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
z-index: 1;
left: 0;
}
.up, .up2{
transform: rotate(0deg);
position: absolute;
left: 0;
right: 60px;
bottom: 90px;
top: 0;
}
.middle, .middle2{
transform: rotate(0deg);
position: absolute;
top: 210px;
bottom: 0;
left: 0;
right: 60px;
}
.leg1{
left:0;
top:0;
right: 0;
bottom: 0;
}
.leg2 {
position: absolute;
left: 40px;
bottom: 0px;
top: 40px;
right: 0;
}
.leg3{
position: absolute;
left: 80px;
bottom: 0px;
top: 40px;
right: 0;
}
.leg4{
position: absolute;
left: 120px;
bottom: 0px;
top: 0px;
right: 0;
}
.insideHead{
border-bottom: 65px solid white;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
position: relative;
margin: auto;
opacity:0.5;
z-index: 1;
top: 125px;
}
.semihead2{
border-top: 40px solid white;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
border-bottom-left-radius: 200px;
border-bottom-right-radius: 200px;
position: absolute;
margin: auto;
opacity: 0.9;
z-index: 1;
top: 190px;
left: 0;
right: 0
}
.head{
animation-iteration-count:infinite;
animation-name: idk;
animation-duration: 4s;
}
@keyframes idk {
0% { transform: scaleY(1) scaleX(1);}
50% { transform: scaleY(0.7) scaleX(1.2);}
100% { transform: scaleY(1) scaleX(1);}
}
.up{
animation-iteration-count:infinite;
animation-name: rotation;
animation-duration: 4s;
}
@keyframes rotation {
0% { transform: rotate(0deg); right: 60px; bottom: 90px;}
50% { transform: rotate(37deg);right: 180px; bottom: 180px;}
100% { transform: rotate(0deg);right: 60px; bottom: 90px;}
}
.up2{
animation-iteration-count:infinite;
animation-name: rotation2;
animation-duration: 4s;
}
@keyframes rotation2 {
0% { transform: rotate(0deg); right: 60px; bottom: 90px;}
50% { transform: rotate(-37deg);right: -90px; bottom: 180px;}
100% { transform: rotate(0deg);right: 60px; bottom: 90px;}
}
.middle{
animation-iteration-count:infinite;
animation-name: rotationm;
animation-duration: 4s;
}
@keyframes rotationm{
0% { transform: rotate(0deg); right: 60px; top: 210px;}
50% { transform: rotate(-17deg);right: 240px; top: 70px;}
100% { transform: rotate(0deg);right: 60px; top: 210px;}
}
.middle2{
animation-iteration-count:infinite;
animation-name: rotationm2;
animation-duration: 4s;
}
@keyframes rotationm2{
0% { transform: rotate(0deg); right: 60px; top: 210px;}
50% { transform: rotate(17deg);right: -120px; top: 70px;}
100% { transform: rotate(0deg);right: 60px; top: 210px;}
}
I zauważyłam, że w trakcie ruchu tej animacji pojawia się pasek scrollowania, co tworzy nieładne wizualnie przejście.
1. Dlaczego tak się dzieje?
Czy to wynika z tego, że moja animacja nie mieści się w ekranie? I jeżeli tak to znowu - dlaczego - poruszam jedynie elementami o ustalonych parametrach, które powinny się zmieścić
2. Gdy próbowałam przeskalować cały obiekt (poprzez dodanie trandform:scale(); do divu "Jellyfish" (główny div, w który wpakowana jest cała animacja) całość owszem się skaluje, ale nogi meduzy idą do górnej krawędzi, mimo bardo podobnego pozycjonowania jak głowa, która z kolei skaluje się poprawnie. Co więcej nogi nie dają się przesunąć w ogóle w osi Y, mimo próby zmieniania parametrów w różnych divach. Dlaczego tak się dzieje I jak to naprawić?
KOd CSS z problemem z pytania 2
body{
background-color:#000c1a;
}
.jellyfish{
transform:scale(0.7);
}
.up, .middle, .middle2, .up2{
width: 7.5px;
height: 120px;
background-color: white;
position: absolute;
margin: auto;
top: 10px;
right: 60px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
z-index: 1;
left: 0;
}
.up, .up2{
transform: rotate(0deg);
position: absolute;
left: 0;
right: 60px;
bottom: 90px;
top: 0;
}
.middle, .middle2{
transform: rotate(0deg);
position: absolute;
top: 210px;
bottom: 0;
left: 0;
right: 60px;
}
.leg1{
left:0;
top:0;
right: 0;
bottom: 0;
}
.leg2 {
position: absolute;
left: 40px;
bottom: 0px;
top: 40px;
right: 0;
}
.leg3{
position: absolute;
left: 80px;
bottom: 0px;
top: 40px;
right: 0;
}
.leg4{
position: absolute;
left: 120px;
bottom: 0px;
top: 0px;
right: 0;
}
.insideHead{
border-bottom: 65px solid white;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
position: relative;
margin: auto;
opacity:0.5;
z-index: 1;
top: 125px;
}
.semihead2{
border-top: 40px solid white;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
border-bottom-left-radius: 200px;
border-bottom-right-radius: 200px;
position: absolute;
margin: auto;
opacity: 0.9;
z-index: 1;
top: 190px;
left: 0;
right: 0
}
.head{
animation-iteration-count:infinite;
animation-name: idk;
animation-duration: 4s;
}
@keyframes idk {
0% { transform: scaleY(1) scaleX(1);}
50% { transform: scaleY(0.7) scaleX(1.2);}
100% { transform: scaleY(1) scaleX(1);}
}
.up{
animation-iteration-count:infinite;
animation-name: rotation;
animation-duration: 4s;
}
@keyframes rotation {
0% { transform: rotate(0deg); right: 60px; bottom: 90px;}
50% { transform: rotate(37deg);right: 180px; bottom: 180px;}
100% { transform: rotate(0deg);right: 60px; bottom: 90px;}
}
.up2{
animation-iteration-count:infinite;
animation-name: rotation2;
animation-duration: 4s;
}
@keyframes rotation2 {
0% { transform: rotate(0deg); right: 60px; bottom: 90px;}
50% { transform: rotate(-37deg);right: -90px; bottom: 180px;}
100% { transform: rotate(0deg);right: 60px; bottom: 90px;}
}
.middle{
animation-iteration-count:infinite;
animation-name: rotationm;
animation-duration: 4s;
}
@keyframes rotationm{
0% { transform: rotate(0deg); right: 60px; top: 210px;}
50% { transform: rotate(-17deg);right: 240px; top: 70px;}
100% { transform: rotate(0deg);right: 60px; top: 210px;}
}
.middle2{
animation-iteration-count:infinite;
animation-name: rotationm2;
animation-duration: 4s;
}
@keyframes rotationm2{
0% { transform: rotate(0deg); right: 60px; top: 210px;}
50% { transform: rotate(17deg);right: -120px; top: 70px;}
100% { transform: rotate(0deg);right: 60px; top: 210px;}
}