0

Как изменить цвет кота?

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>

2
  • изображение кота надо в svg сделать и менять у него цвет заливки)
    – Summersby
    1 ноя 2021 в 11:04
  • C png изображением можете разве что попробовать filter
    – Simon
    1 ноя 2021 в 11:06

1 ответ 1

-1

Используйте filter, вот пример генератора

.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;
  filter: invert(8%) sepia(100%) saturate(7374%) hue-rotate(247deg) brightness(93%) contrast(145%);
}

/* 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.