Как изменить цвет кота?
https://codepen.io/Marticka/pen/MWegpjr
.wrapper {
display:flex;
justify-content:center;
align-items:center;
height:95vh;
}
/* cat body */
.cat {
position: absolute;
width:200px;
height: 100px;
/* margin: 20px auto; */
overflow: hidden;
background-color: #fff;
}
.cat img {
width:100%;
position:absolute;
left: calc(50% - 100px);
top: -46px;
}
/* cat's years styles */
.ears{
position:absolute
}
.ear {
width:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:20px solid pink;
position: relative;
}
.eLeft {
left: -49px;
top: -16px;
transform: rotate(-48deg);
}
.eRight {
left: 49px;
top: -36px;
transform: rotate(48deg);
}
/* cat's eyes */
.eye {
position: absolute;
width:28px;
height:28px;
background-color: #071;
box-shadow: 5px 5px 6px #0f2 inset;
border-radius: 50%;
border: 1px solid #000;
top:40px;
overflow:hidden;
animation: eyesTrackBall 1.5s ease-in-out infinite alternate;
}
.left {left: calc(50% - 35px);}
.right {left: calc(50% + 6px);}
.eyeWatch{
width: 7px;
height:20px;
background-color: #000;
border-radius: 50%;
margin-top: 8px;
margin-left:20px;
transform:rotate(25deg);
animation: trackIt 1.5s ease-in-out infinite alternate;
overflow:hidden;
}
/* eyes light reflaction */
.glare {
width:5px;
height:5px;
background-color: #fff;
border-radius:50%;
position:relative;
top:3px;
animation: light 1.5s ease-in-out infinite alternate;
}
.eyelids {
width:90px;
height:1px;
position:absolute;
z-index:1;
top:35px;
left: calc(50% - 45px);
background-color: #000;
animation: blink 6s ease-in-out infinite alternate;
}
.nose{
width:14px;
height:5px;
background-color: pink;
position:absolute;
top:70px;
border-radius:50% 50% 0 0;
left:calc(50% - 7px);
}
/* cats's claws */
.claws{
width: 3px;
height: 10px;
position: absolute;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px #000;
}
.c1{top: 78px;left: 25px;transform:rotatez(25deg);}
.c2{top: 83px;left: 41px;}
.c3{top: 78px;left: 56px;transform:rotatez(-25deg);}
.c4{top: 78px;right: 25px;transform:rotatez(-25deg);}
.c5{top: 83px;right: 41px;}
.c6{top: 78px;right: 56px;transform:rotatez(25deg);}
/* ball styles */
.ballContainer {
width: 100%;
margin-top:140px;
}
.ball {
width:20px;
height:20px;
background-color: red;
box-shadow: 1px -1px 3px #000 inset;
border-radius: 50%;
position:absolute;
animation: ballLight 1.5s ease-in-out infinite alternate;
}
.ballShadow{
width:20px;
height:15px;
background-color: #000;
margin-left: calc(50% + 90px);
border-radius: 50%;
position:absolute;
box-shadow: 0 0 5px 2px #fff inset;
animation: ballRolling 1.5s ease-in-out infinite alternate;
}
/* animations */
/* eyes traking the ball */
@keyframes trackIt {
from{
margin-left:21px;
transform:rotate(25deg);
}
to{
margin-left:0px;
transform:rotate(-25deg);
}
}
/* eye green shadow moving after the balls movement*/
@keyframes eyesTrackBall {
from{box-shadow: 5px 5px 6px #0f2 inset;}
to {box-shadow: -5px 5px 6px #0f2 inset;}
}
/* light for the eyes glare */
@keyframes light {
0%{transform: translateX(-2px);opacity:3;}
50%{opacity:1;}
100%{transform: translateX(4px);opacity:3;}
}
/* eyelids animation */
@keyframes blink {
0%{height: 1px;}
3%{height: 35px;}
4%{height: 1px;}
100%{height: 1px;}
}
/* ball roll animation along with animation for it shadow to reflect the light */
@keyframes ballRolling {
0%{margin-left: calc(50% + 90px);}
100%{margin-left: calc(50% - 90px);}
}
@keyframes ballLight {
0%{
box-shadow: -1px -1px 3px #000 inset;
margin: -10px 0 0 -3px;
}
100%{
box-shadow: 1px -1px 3px #000 inset;
margin: -10px 0 0 3px;
}
}
<div class="wrapper">
<div class="cat"><img src="https://github.com/Martichka9/stalking-cat-loader/blob/master/imgs/silhouette-snout-logo-wall-mammal.png?raw=true" />
<div class="eyelids"></div>
<div class="eye left">
<div class="eyeWatch">
<div class="glare"></div>
</div>
</div>
<div class="eye right">
<div class="eyeWatch">
<div class="glare"></div>
</div>
</div>
<div class="nose"></div>
<div class="claws c1"></div>
<div class="claws c2"></div>
<div class="claws c3"></div>
<div class="claws c4"></div>
<div class="claws c5"></div>
<div class="claws c6"></div>
</div>
<div class="ballContainer">
<div class="ballShadow">
<div class="ball"></div>
</div>
</div>
<div class="ears">
<div class="ear eLeft"></div>
<div class="ear eRight"></div>
</div>
</div>