Главная » Изображения » Детские картинки на css

Детские картинки на css

Нашла на codepen.io несколько детских изображений на css.

Куда можно их добавить на сайте, если он не детской тематики, пока не придумала. В мыслях несколько вариантов:

Использовать для поздравлений - добавить текст пожеланий.

Использовать вместе с какой-либо информацией - добавить к картинкам текстовую информацию.

Установить на сайт просто для красоты.

Что бы посмотреть картинки "вживую", вставьте код в редактор и нажмите кнопку посмотреть результат.

Свинка Пеппа

<div class="pig_container-wr">
    <div class="pig_container">
        <div class="tail_left"></div>
        <div class="tail_right"></div>
        <div class="tail_blank"></div>
        <div class="tail_middle"></div>
        <div class="tail_circle"></div>
        <div class="pig_shadow"></div>
        <div class="left_foot"></div>
        <div class="left_foot right_foot"></div>
        <div class="left_shoes"></div>
        <div class="left_shoes right_shoes"></div>
        <div>
            <div class="hand_left_top"></div>
            <div class="hand_left_bottom"></div>
            <div class="hand_left_middle"></div>
        </div>
        <div class="pig_body_bottom"></div>
        <div>
            <div class="hand_right_top"></div>
            <div class="hand_right_bottom"></div>
            <div class="hand_right_middle"></div>
        </div>
        <div>
            <div class="ear_left"></div>
            <div class="ear_right"></div>
            <div class="pig_head">
                <div class="pig_head_white_left_bottom"></div>
            </div>
            <div class="pig_head_white_left_top"></div>
            <div class="pig_nose"></div>
            <div class="pig_jaw"></div>
            <div class="pig_jaw_right"></div>
            <div class="pig_nose_bottom"></div>
            <div class="nose_kong_left"></div>
            <div class="nose_kong_right"></div>
            <div class="left_eye">
                <div class="left_eye_bg"></div>
                <div class="left_eye_ball"></div>
                <div class="left_eye_border"></div>
            </div>
            <div class="right_eye">
                <div class="right_eye_bg"></div>
                <div class="right_eye_ball"></div>
                <div class="right_eye_border"></div>
            </div>
            <div class="mouth">
                <div class="mouth_bottom"></div>
                <div class="mouth_middle"></div>
                <div class="mouth_top"></div>
            </div>
            <div class="face"></div>
        </div>
    </div> 
</div>
<style>
.pig_container-wr {    
    display: flex;
    justify-content: center;    
}    
.pig_container {
    position: relative;
    width: 440px;
    height: 470px;
    top: -120px;    
    margin: 0;
}
@media (max-width: 500px){ 
    .pig_container {
        transform: scale(0.5) translateX(-50%);
        height: 235px;
        width: 220px;
    }
} 
.pig_container div {
    position: absolute;
    transform-origin: left top;
    box-sizing: content-box;        
}
.pig_container .pig_head {
    width: 300px;
    height: 200px;
    top: 100px;
    left: 100px;
    border-radius: 95% 50% 50% 50%/ 87% 80% 68% 50%;
    border: 6px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(30deg);
    z-index: 100;
    box-sizing: border-box;
}
.pig_container .pig_head_white_left_bottom {
    width: 200px;
    height: 154px;
    bottom: -7px;
    left: -38px;
    background-color: #fff;
    box-sizing: border-box;
}
.pig_container .pig_head_white_left_top {
    width: 200px;
    height: 66px;
    bottom: 84px;
    background-color: #ffb3da;
    box-sizing: border-box;
    top: 166px;
    left: 134px;
    transform: rotate(34deg);
    z-index: 103;
}
.pig_container .left_eye, 
.pig_container .right_eye, 
.pig_container .face, 
.pig_container .mouth {
    z-index: 104;
}
.pig_container .pig_nose {
    width: 51px;
    height: 70px;
    top: 147px;
    left: 107px;
    border-radius: 72% 72% 72% 72%/ 72% 72% 72% 72%;
    border: 6px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(36deg);
    z-index: 103;
    box-sizing: border-box;
}
.pig_container .pig_nose_bottom {
    width: 88px;
    height: 13px;
    top: 209px;
    left: 84px;
    border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
    border: 6px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(35deg);
    z-index: 102;
    box-sizing: border-box;
    border-top-color: #ffb3da;
}
.pig_container .pig_jaw {
    width: 97px;
    height: 104px;
    top: 249px;
    left: 141px;
    border-radius: 0% 0% 0% 76%/ 0% 0% 0% 74%;
    border: 6px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(22deg);
    z-index: 100;
    box-sizing: border-box;
    border-top-color: #ffb3da;
    border-right-color: #ffb3da;
}
.pig_container .pig_jaw_right {
    width: 13px;
    height: 6px;
    background-color: #ef96c2;
    top: 373px;
    left: 186px;
    transform: rotate(19deg);
    z-index: 100;
}
.pig_container .left_eye_bg {
    width: 29px;
    height: 29px;
    top: 177px;
    left: 170px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    border: 6px solid #fff;
    background-color: #fff;
    z-index: 101;
    box-sizing: border-box;
}
.pig_container .left_eye_ball {
    width: 10px;
    height: 10px;
    top: 181px;
    left: 171px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    border: 6px solid #000;
    background-color: #000;
    z-index: 101;
    box-sizing: border-box;
}
.pig_container .left_eye_border {
    width: 34px;
    height: 34px;
    top: 174px;
    left: 166px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    border: 6px solid #ef96c2;
    background-color: transparent;
    z-index: 101;
    box-sizing: border-box;
}
 
.pig_container .right_eye_bg {
    width: 28px;
    height: 28px;
    top: 194px;
    left: 205px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    border: 6px solid #fff;
    background-color: #fff;
    z-index: 101;
    box-sizing: border-box;
}
.pig_container .right_eye_ball {
    width: 10px;
    height: 10px;
    top: 199px;
    left: 208px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    border: 6px solid #000;
    background-color: #000;
    z-index: 101;
    box-sizing: border-box;
}
.pig_container .right_eye_border {
    width: 35px;
    height: 37px;
    top: 191px;
    left: 202px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    border: 6px solid #ef96c2;
    background-color: transparent;
    z-index: 101;
    box-sizing: border-box;
}
.pig_container .mouth_bottom {
    width: 97px;
    height: 45px;
    top: 273px;
    left: 154px;
    border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
    border: 6px solid #d44b81;
    background-color: #000;
    z-index: 101;
    box-sizing: border-box;
    transform: rotate(19deg);
}
.pig_container .mouth_middle {
    width: 98px;
    height: 27px;
    top: 272px;
    left: 154px;
    border-radius: 0% 0% 50% 50%/ 0% 0% 100% 100%;
    border: 6px solid #d44b81;
    background-color: #ffb3da;
    z-index: 101;
    box-sizing: border-box;
    transform: rotate(19deg);
    border-top-color: #ffb3da;
}
.pig_container .mouth_top {
    width: 135px;
    height: 66px;
    top: 231px;
    left: 149px;
    border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
    background-color: #ffb3da;
    z-index: 101;
    transform: rotate(13deg);
}
.pig_container .face {
    width: 49px;
    height: 59px;
    top: 243px;
    left: 269px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    background-color: #ff96ce;
    transform: rotate(26deg);
}
.pig_container .nose_kong_left {
    width: 12px;
    height: 12px;
    top: 179px;
    left: 93px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    background-color: #da6c9b;
    z-index: 104;
}
.pig_container .nose_kong_right {
    width: 12px;
    height: 12px;
    top: 182px;
    left: 109px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    background-color: #da6c9b;
    z-index: 104;
}
.pig_container .ear_left {
    width: 24px;
    height: 52px;
    top: 126px;
    left: 226px;
    border: 6px solid #ef96c2;
    border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;
    background-color: #ffb3da;
    z-index: 99;
    transform: rotate(18deg);
}
.pig_container .ear_right {
    width: 24px;
    height: 52px;
    top: 150px;
    left: 280px;
    border: 6px solid #ef96c2;
    border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;
    background-color: #ffb3da;
    z-index: 99;
    transform: rotate(36deg);
}
.pig_container .pig_body_bottom {
    width: 215px;
    height: 197px;
    top: 305px;
    left: 108px;
    border: 6px solid #e33b32;
    border-radius: 50% 50% 50% 50%/ 100% 100% 0% 0%;
    background-color: #eb5b50;
    z-index: 99;
}
 
.pig_container .hand_left_middle {
    width: 78px;
    height: 12px;
    top: 432px;
    left: 63px;
    border-radius: 100% 100% 100% 17%/ 100% 90% 16% 90%;
    background-color: #ffbadf;
    z-index: 99;
    transform: rotate(-35deg);
}
.pig_container .hand_left_top {
    width: 28px;
    height: 9px;
    top: 415px;
    left: 63px;
    border-radius: 100% 100% 100% 35%/ 100% 90% 16% 90%;
    background-color: #ffbadf;
    z-index: 99;
}
.hand_left_bottom {
    width: 20px;
    height: 9px;
    top: 420px;
    left: 93px;
    border-radius: 60% 59% 65% 90%/ 100% 90% 89% 90%;
    background-color: #ffbadf;
    z-index: 99;
    transform: rotate(98deg);
}
.pig_container .hand_right_middle {
    width: 79px;
    height: 11px;
    top: 374px;
    left: 309px;
    border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;
    background-color: #ffbadf;
    z-index: 99;
    transform: rotate(28deg);
}
.pig_container .hand_right_top {
    width: 28px;
    height: 10px;
    top: 397px;
    left: 350px;
    border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;
    background-color: #ffbadf;
    z-index: 99;
    transform: rotate(-7deg);
}
.pig_container .hand_right_bottom {
    width: 28px;
    height: 11px;
    top: 395px;
    left: 356px;
    border-radius: 100% 100% 62% 17%/ 99% 92% 90% 90%;
    background-color: #ffbadf;
    z-index: 99;
    transform: rotate(69deg);
}
.pig_container .left_foot {
    width: 11px;
    height: 52px;
    top: 507px;
    left: 175px;
    border-radius: 100% 100% 100% 100%/ 50% 50% 21% 20%;
    background-color: #ffbadf;
    z-index: 99;
}
.pig_container .left_shoes {
    width: 51px;
    height: 14px;
    top: 553px;
    left: 138px;
    border-radius: 58% 187% 180% 50%/ 130% 123% 113% 100%;
    background-color: #000;
    z-index: 99;
    transform: rotate(0deg);
}
.pig_container .right_foot {
    left: 268px;
}
.pig_container .right_shoes {
    left: 230px;
}
.pig_container .pig_shadow {
    width: 240px;
    height: 47px;
    top: 535px;
    left: 101px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    background-color: rgba(171, 171, 171, 0.7);
    transform: rotate(-1deg);
}
.pig_container .tail_left {
    width: 19px;
    height: 8px;
    top: 472px;
    left: 330px;
    border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
    transform: rotate(-9deg);
    background-color: #ffbadf;
    z-index: 99;
}
.pig_container .tail_left_blank {
    width: 30px;
    height: 15px;
    top: 466px;
    left: 332px;
    border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
    transform: rotate(-36deg);
    background-color: #fff;
    z-index: 99;
}
.pig_container .tail_right {
    width: 21px;
    height: 5px;
    top: 451px;
    left: 343px;
    border-radius: 0% 0% 51% 50%/ 0% 0% 100% 100%;
    transform: rotate(31deg);
    background-color: #fff;
    z-index: 99;
    border: 8px solid #ffbadf;
    border-top-color: #fff;
}
.pig_container .tail_blank {
    width: 36px;
    height: 21px;
    top: 437px;
    left: 351px;
    transform: rotate(34deg);
    background-color: #fff;
    z-index: 99;
}
.pig_container .tail_middle {
    width: 7px;
    height: 11px;
    top: 450px;
    left: 336px;
    border: 8px solid #ffbadf;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    background-color: #fff;
    z-index: 99;
}
.pig_container .tail_circle {
    width: 17px;
    height: 8px;
    top: 475px;
    left: 358px;
    border-radius: 36% 37% 62% 63%/ 99% 92% 90% 90%;
    background-color: #ffbadf;
    z-index: 99;
    transform: rotate(-40deg);
}
</style>

Автор https://codepen.io/crowndaisy

Анимационная корова

Код:

<div class="cow-container">
    <div class="cloud-1">
        <div class="cloud-circle-1"></div>
        <div class="cloud-circle-2"></div>
        <div class="cloud-circle-3"></div>
        <div class="cloud-circle-4"></div>
    </div>
    <div class="cloud-2">
        <div class="cloud-circle-1"></div>
        <div class="cloud-circle-2"></div>
        <div class="cloud-circle-3"></div>
        <div class="cloud-circle-4"></div>
    </div>
    <div class="cloud-3">
        <div class="cloud-circle-1"></div>
        <div class="cloud-circle-2"></div>
        <div class="cloud-circle-3"></div>
        <div class="cloud-circle-4"></div>
    </div>    
    <div class="cow-body">
        <div class="clip-wrapper">
            <div class="cow-udder"></div>
            <div class="arms right-arm"></div>
            <div class="arms left-arm"></div>
            <div class="spot-1"></div>
            <div class="spot-2"></div>
            <div class="spot-3"></div>
            <div class="spot-4"></div>
            <div class="spot-5"></div>
            <div class="spot-6"></div>
        </div>
        <div class="eyes eye-1"></div>
        <div class="eyes eye-2"></div>
        <div class="smile-1"></div>
        <div class="smile-2"></div>
        <div class="ears left-ear"></div>
        <div class="ears right-ear"></div>
        <div class="horns left-horn"></div>
        <div class="horns right-horn"></div>
        <div class="muzzle">
            <div class="nostril-1"></div>
            <div class="nostril-2"></div>
        </div>
        <div class="feet left-foot"></div>
        <div class="feet right-foot"></div>
        <div class="teats teat-1"></div>
        <div class="teats teat-2"></div>
        <div class="teats teat-3"></div>
        <div class="head"></div>
        <div class="tuners tuner-1"></div>
        <div class="tuners tuner-2"></div>
        <div class="tuners tuner-3"></div>
        <div class="tuners tuner-4"></div>
        <div class="neck"></div>
        <div class="cuatro-body-1"></div>
        <div class="cuatro-body-2"></div>
        <div class="cuatro-body-3"></div>
        <div class="sound-hole"></div>
        <div class="bridge"></div>
        <div class="strings string-1"></div>
        <div class="strings string-2"></div>
        <div class="strings string-3"></div>
        <div class="strings string-4"></div>
        <div class="wing-front-1"></div>
        <div class="wing-front-2"></div>
        <div class="wing-front-3"></div>
        <div class="wing-back-1"></div>
        <div class="wing-back-2"></div>
        <div class="note-1">&#9835</div>
        <div class="note-2">&#9833</div>
        <div class="note-3">&#9834</div>
        <div class="note-4">&#9835</div>    
    </div>
</div>
<style>
:root {
    --cow-border: 3px solid #262626;
    --cow-border-color: #262626;
    --cow-border-width: 3px;
    --cow-color: #fff;
    --cow-details: #f2d5e0;
    --transparent-border-top: transparent #262626 #262626 #262626;
    --cuatro-color: #bf9b7a;
    --cuatro-border: #574737;
}
.cow-container *  {
    box-sizing: border-box;
}
.cow-container  {
    position: relative;
    align-items: center;
    display: flex;
    height: 500px;
    justify-content: center;
    margin: 0;
    background: #BFE2FF;
    overflow: hidden;
}
.cow-body,
.left-foot,
.right-foot,
.right-ear,
.left-ear,
.left-horn,
.right-horn,
.teat-1,
.teat-2,
.teat-3,
.wing-front-1,
.wing-front-2,
.wing-back-1,
.wing-back-2,
.right-arm,
.string-1,
.string-2,
.string-3,
.string-4 {
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.cow-body {
    border-radius: 50%;
    font-size: clamp(10px, 1vmin, 17px);
    height: 25em;
    position: relative;
    width: 25em;
    animation-name: moveBody;
}
@keyframes moveBody {
    0%,
    90%,
    100% {
        transform: translateY(0px);
    }
    65% {
        transform: translateY(15px);
    }
}
.cow-body > * {
    position: absolute;
}
.clip-wrapper {
    background: var(--cow-color);
    border: var(--cow-border);
    border-radius: 50%;
    bottom: 0;
    height: 100%;
    overflow: hidden;
    right: 0;
    width: 100%;
}
.cow-udder {
    background: var(--cow-details);
    border-radius: 50%;
    border: 3px solid #f0a2c3;
    bottom: -2em;
    height: 15em;
    position: absolute;
    right: -2em;
    transform: rotate(-30deg);
    width: 15em;
}
.feet {
    background: var(--cow-color);
    border-radius: 50%;
    border: var(--cow-border);
    height: 7em;
    width: 3em;
}
.left-foot {
    animation-name: rotateLeftFoot;
    border-color: var(--transparent-border-top);
    bottom: -4em;
    left: 7em;
    transform-origin: center;
    transform: rotate(10deg);
}
@keyframes rotateLeftFoot {
    0%,
    90%,
    100% {
        transform: rotate(0deg);
    }
    65% {
        transform: rotate(8deg);
    }
}
.right-foot {
    animation-name: rotateRightFoot;
    bottom: -3em;
    left: 13em;
    transform-origin: center;
    transform: rotate(10deg);
    z-index: -1;
}
@keyframes rotateRightFoot {
    0%,
    90%,
    100% {
        transform: rotate(0deg);
    }
    65% {
        transform: rotate(-8deg);
    }
}
.arms {
    background: var(--cow-color);
    border-radius: 50%;
    border: var(--cow-border);
    z-index: 3;
    position: absolute;
}
.right-arm {
    animation-name: playCuatro;
    border-color: var(--transparent-border-top);
    height: 7em;
    left: 21.1em;
    top: 8em;
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(21deg);
    width: 3em;
}
@keyframes playCuatro {
    0%,
    50%,
    100% {
        left: 21.1em;
        transform: rotate(21deg);
    }
    20%,
    80% {
        left: 21.6em;
        transform: rotate(6deg);
    }
}
.left-arm {
    left: 11em;
    top: 11.5em;
    width: 3em;
    height: 8em;
    border-color: var(--cow-border-color) var(--cow-border-color) transparent
    var(--cow-border-color);
    transform: rotate(55deg);
}
.horns {
    background: var(--cow-color);
    border-color: var(--cow-border-color) transparent transparent
    var(--cow-border-color);
    border-radius: 6px;
    border-style: solid;
    border-width: 4px;
    height: 4em;
    width: 4em;
}
.left-horn {
    animation-name: moveLeftHorn;
    left: 7em;
    top: 1em;
    transform: skew(25deg, 25deg);
}
@keyframes moveLeftHorn {
    0%,
    90%,
    100% {
        transform: skew(25deg, 25deg) translateY(0px);
    }
    65% {
        transform: skew(25deg, 25deg) translateY(5px);
    }
}
.right-horn {
    animation-name: moveRightHorn;
    left: 11.5em;
    top: -1em;
    transform: rotate(50deg) skew(25deg, 25deg);
    z-index: -1;
}
@keyframes moveRightHorn {
    0%,
    90%,
    100% {
        transform: rotate(50deg) skew(25deg, 25deg) translateY(0px);
    }
    65% {
        transform: rotate(50deg) skew(25deg, 25deg) translateY(5px);
    }
}
.ears {
    background: var(--cow-color);
    border-color: var(--transparent-border-top);
    border-radius: 50%;
    border-style: solid;
    border-width: var(--cow-border-width);
    height: 8em;
}
.left-ear {
    animation-delay: 100ms;
    animation-name: rotateLeftEar;
    left: 11em;
    top: 4.5em;
    transform-box: fill-box;
    transform-origin: center top;
    transform: rotate(70deg);
    width: 2em;
    z-index: 3;
}
@keyframes rotateLeftEar {
    90% {
        transform: rotate(70deg);
    }
    30%,
    60% {
        transform: rotate(40deg);
    }
}
.right-ear {
    animation-delay: 100ms;
    animation-name: rotateRightEar;
    left: 18em;
    top: -5em;
    transform-box: fill-box;
    transform-origin: center center;
    transform: rotate(-140deg);
    width: 2em;
    z-index: -1;
}
@keyframes rotateRightEar {
    90% {
        top: -5em;
        transform: rotate(-140deg);
    }
    30%,
    70% {
        top: -3em;
        transform: rotate(-110deg);
    }
}
.teats {
    background: var(--cow-details);
    border-color: transparent #f0a2c3 #f0a2c3 #f0a2c3;
    border-radius: 50%;
    border-style: solid;
    border-width: var(--cow-border-width);
    height: 7em;
}
.teat-1 {
    animation-name: moveTeat1;
    bottom: -3em;
    left: 16em;
    transform-origin: center center;
    transform: rotate(-40deg);
    width: 1.8em;
}
@keyframes moveTeat1 {
    65% {
        transform: rotate(-40deg);
    }
    0%,
    90%,
    100% {
        transform: rotate(-25deg);
    }
}
.teat-2 {
    animation-name: moveTeat2;
    bottom: -0.5em;
    left: 19em;
    transform-origin: center center;
    transform: rotate(-45deg);
    width: 2.5em;
}
@keyframes moveTeat2 {
    65% {
        transform: rotate(-45deg);
    }
    0%,
    90%,
    100% {
        transform: rotate(-30deg);
    }
}
.teat-3 {
    animation-name: moveTeat3;
    bottom: 2.5em;
    left: 21.5em;
    transform-origin: center center;
    transform: rotate(-50deg);
    width: 2em;
}
@keyframes moveTeat3 {
    65% {
        transform: rotate(-50deg);
    }
    0%,
    90%,
    100% {
        transform: rotate(-35deg);
    }
}
.muzzle {
    background: var(--cow-details);
    border-color: #f0a2c3;
    border-radius: 2.5em 2em 5em 3em / 3em 2em 4em 3em;
    border-style: solid;
    border-width: var(--cow-border-width);
    display: flex;
    flex-direction: row;
    height: 6em;
    left: 19em;
    top: 1em;
    transform: rotate(-25deg);
    width: 8.5em;
}
.nostril-1,
.nostril-2 {
    background: var(--cow-border-color);
    border-radius: 50%;
    height: 1.3em;
    margin: 0.2em;
    transform: rotate(20deg) translate(4em);
    width: 0.6em;
}
.cuatro-body-1 {
    background: var(--cuatro-color);
    border-radius: 50%;
    height: 9em;
    left: 20em;
    top: 10em;
    width: 8.5em;
    z-index: 1;
    border: 4px solid var(--cuatro-border);
}
.cuatro-body-2,
.cuatro-body-3 {
    background: var(--cuatro-color);
    border-radius: 50%;
    height: 5.5em;
    left: 18em;
    top: 11.3em;
    width: 5em;
    border: 4px solid var(--cuatro-border);
}
.cuatro-body-3 {
    width: calc(5em - 8px);
    height: calc(5.5em - 8px);
    transform: translate(4px, 4px);
    border-color: transparent;
    z-index: 1;
}
.neck {
    width: 2.2em;
    height: 8em;
    background: var(--cuatro-color);
    transform: rotate(-83deg);
    top: 9.5em;
    left: 14em;
    border: 4px solid var(--cuatro-border);
}
.head {
    width: 3.5em;
    height: 5em;
    background: var(--cuatro-color);
    transform: rotate(-83deg);
    top: 10.2em;
    left: 7.1em;
    border-radius: 10%;
    border: 4px solid var(--cuatro-border);
    z-index: 2;
}
.tuners {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: var(--cuatro-color);
    border: 4px solid var(--cuatro-border);
}
.tuner-1 {
    top: 10.3em;
    left: 9.5em;
}
.tuner-2 {
    top: 14em;
    left: 7em;
}
.tuner-3 {
    top: 14.3em;
    left: 9.2em;
}
.tuner-4 {
    top: 10em;
    left: 7em;
}
.sound-hole {
    background: #3b3026;
    border-radius: 50%;
    height: 3.5em;
    left: 21em;
    top: 12.5em;
    width: 3.5em;
    border: 4px solid #3b3026;
    z-index: 1;
}
.bridge {
    width: 0.8em;
    height: 2.5em;
    background: var(--cuatro-border);
    transform: rotate(8deg);
    top: 13.5em;
    left: 26em;
    border: 4px solid var(--cuatro-border);
    z-index: 2;
}
.strings {
    height: 15.4em;
    transform: rotate(-83deg);
    border: 1px solid #f2dac4;
}
.string-1 {
    animation-name: stringOneVibration;
    top: 6.8em;
    left: 18.7em;
    z-index: 1;
}
@keyframes stringOneVibration {
    0%,
    100% {
        top: 6.8em;
        left: 18.7em;
    }
    20% {
        top: 6.9em;
        left: 18.8em;
    }
}
.string-2 {
    animation-name: stringTwoVibration;
    top: 6.4em;
    left: 18.7em;
    z-index: 1;
}
@keyframes stringTwoVibration {
    0%,
    100% {
        top: 6.4em;
        left: 18.7em;
    }
    20% {
        top: 6.5em;
        left: 18.8em;
    }
}
.string-3 {
    animation-name: stringThreeVibration;
    top: 6em;
    left: 18.75em;
    z-index: 1;
}
@keyframes stringThreeVibration {
    0%,
    100% {
        top: 6em;
        left: 18.7em;
    }
    20% {
        top: 6.1em;
        left: 18.8em;
    }
}
.string-4 {
    animation-name: stringFourVibration;
    top: 5.6em;
    left: 18.75em;
    z-index: 1;
}
@keyframes stringFourVibration {
    0%,
    100% {
        top: 5.6em;
        left: 18.7em;
    }
    20% {
        top: 5.7em;
        left: 18.8em;
    }
}
.wing-front-1,
.wing-front-2,
.wing-back-1,
.wing-back-2 {
    animation-delay: -210ms;
}
.wing-front-1 {
    animation-name: flappingFrontOne;
    background: #fff;
    border-radius: 50%;
    border: var(--cow-border);
    height: 10em;
    left: -1.5em;
    top: -3em;
    transform: rotate(-5deg);
    width: 5em;
    border-color: #262626 #262626 transparent #262626;
    z-index: -1;
}
@keyframes flappingFrontOne {
    80%,
    100% {
        left: -1.5em;
        top: -3em;
        transform: rotate(-5deg);
    }
    20% {
        left: 0;
        top: -2em;
        transform: rotate(21deg);
    }
}
.wing-front-2 {
    animation-name: flappingFrontTwo;
    background: #fff;
    border-radius: 50%;
    border: var(--cow-border);
    height: 7em;
    left: -3.9em;
    top: 4.9em;
    transform: rotate(55deg);
    width: 4.5em;
    border-color: transparent #262626 #262626 #262626;
    z-index: -1;
}
@keyframes flappingFrontTwo {
    80%,
    100% {
        left: -3.9em;
        top: 4.9em;
        transform: rotate(55deg);
    }
    20% {
        left: -2.7em;
        top: 4.9em;
        transform: rotate(30deg);
    }
}
.wing-back-1 {
    animation-name: flappingBackOne;
    background: var(--cow-color);
    border-radius: 50%;
    border: var(--cow-border);
    height: 10em;
    left: 0.3em;
    top: -3em;
    transform: rotate(10deg);
    width: 4em;
    z-index: -2;
}
@keyframes flappingBackOne {
    80%,
    100% {
        left: 0.3em;
        top: -3em;
        transform: rotate(10deg);
    }
    20% {
        left: 2.3em;
        top: -2em;
        transform: rotate(24deg);
    }
}
.wing-back-2 {
    animation-name: flappingBackTwo;
    background: #fff;
    border-radius: 50%;
    border: var(--cow-border);
    height: 6em;
    left: -2.8em;
    top: 6.1em;
    transform: rotate(45deg);
    width: 3.5em;
    z-index: -2;
}
@keyframes flappingBackTwo {
    80%,
    100% {
        left: -2.8em;
        top: 6.1em;
        transform: rotate(45deg);
    }
    20% {
        left: 0em;
        top: 7.4em;
        transform: rotate(30deg);
    }
}
.spot-1 {
    background: var(--cow-border-color);
    border-radius: 50%;
    height: 4em;
    left: 2em;
    position: absolute;
    top: 3em;
    width: 3em;
}
.spot-2 {
    background: var(--cow-border-color);
    border-radius: 30%;
    height: 5em;
    left: -1em;
    position: absolute;
    top: 5em;
    width: 4em;
}
.spot-3 {
    background: var(--cow-border-color);
    border-radius: 50%;
    height: 4em;
    left: -1.5em;
    position: absolute;
    top: 11em;
    width: 3em;
}
.spot-4 {
    background: var(--cow-border-color);
    border-radius: 40%;
    height: 6em;
    left: -1em;
    position: absolute;
    top: 13em;
    transform: rotate(-10deg);
    width: 3em;
}
.spot-5 {
    background: var(--cow-border-color);
    border-radius: 40%;
    height: 1.5em;
    left: 2em;
    position: absolute;
    top: 13em;
    width: 1em;
}
.spot-6 {
    background: var(--cow-border-color);
    border-radius: 3em 5em 2em 6em / 3em 6em 2em 8em;
    height: 3.5em;
    left: 3em;
    position: absolute;
    top: 15em;
    width: 2.5em;
}
.eyes {
    background: var(--cow-color);
    border-color: var(--transparent-border-top);
    border-radius: 50%;
    border-style: solid;
    border-width: var(--cow-border-width);
    height: 2.5em;
    width: 1.2em;
}
.eye-1 {
    top: 3em;
    left: 15em;
    transform: rotate(-80deg);
    z-index: 3;
}
.eye-2 {
    top: 1.5em;
    left: 16em;
    transform: rotate(-70deg);
    z-index: 3;
}
.smile-1 {
    border-color: transparent transparent var(--cow-border-color) transparent;
    border-radius: 50%;
    border-style: solid;
    border-width: var(--cow-border-width);
    height: 2em;
    left: 14em;
    top: 5.5em;
    transform: rotate(-15deg);
    width: 3em;
}
.smile-2 {
    border-color: transparent transparent var(--cow-border-color)
    var(--cow-border-color);
    border-radius: 50%;
    border-style: solid;
    border-width: var(--cow-border-width);
    height: 2em;
    left: 15.3em;
    top: 6.2em;
    transform: rotate(-15deg);
    width: 6em;
}
.note-1,
.note-2,
.note-3,
.note-4 {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    font-size: 3em;
    position: absolute;
    right: 5%;
    text-shadow: 1px 1px 1px #262626;
    top: 50%;
}
.note-1 {
    animation-name: noteOne;
    color: #f2c438;
    transform: rotate(10deg);
}
.note-2 {
    animation-delay: 273ms;
    animation-name: noteTwo;
    color: #394eff;
    transform: rotate(10deg);
}
.note-3 {
    animation-delay: 469ms;
    animation-name: noteThree;
    color: #fff;
    transform: rotate(-20deg);
}
.note-4 {
    animation-delay: 793ms;
    animation-name: noteFour;
    color: #fa3138;
    transform: rotate(-30deg);
}
@keyframes noteOne {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate(0, 0);
    }
    20% {
        opacity: 1;
        transform: scale(1) rotate(10deg) translate(0, 0);
    }
    40% {
        opacity: 1;
        transform: scale(1.1) rotate(20deg) translate(10%, -100%);
    }
    60% {
        opacity: 1;
        transform: scale(1.2) rotate(10deg) translate(20%, -200%);
    }
    80% {
        opacity: 0.6;
        transform: scale(1.3) rotate(0deg) translate(0, -300%);
    }
    100% {
        opacity: 0;
        transform: scale(1.4) rotate(-10deg) translate(20%, -400%);
    }
}
@keyframes noteTwo {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate(0, 0);
    }
    20% {
        opacity: 1;
        transform: scale(1) rotate(5deg) translate(0, 0);
    }
    40% {
        opacity: 1;
        transform: scale(1.1) rotate(15deg) translate(20%, -100%);
    }
    60% {
        opacity: 1;
        transform: scale(1.2) rotate(10deg) translate(40%, -200%);
    }
    80% {
        opacity: 0.6;
        transform: scale(1.3) rotate(0deg) translate(-10, -300%);
    }
    100% {
        opacity: 0;
        transform: scale(1.4) rotate(-10deg) translate(20%, -400%);
    }
}
@keyframes noteThree {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate(0, 0);
    }
    20% {
        opacity: 1;
        transform: scale(1) rotate(-10deg) translate(0, 0);
    }
    40% {
        opacity: 1;
        transform: scale(1.1) rotate(-20deg) translate(-10%, -100%);
    }
    60% {
        opacity: 1;
        transform: scale(1.2) rotate(-10deg) translate(-40%, -200%);
    }
    80% {
        opacity: 0.6;
        transform: scale(1.3) rotate(0deg) translate(10%, -300%);
    }
    100% {
        opacity: 0;
        transform: scale(1.4) rotate(10deg) translate(-20%, -400%);
    }
}
@keyframes noteFour {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate(0, 0);
    }
    20% {
        opacity: 1;
        transform: scale(1) rotate(-5deg) translate(0, 0);
    }
    40% {
        opacity: 1;
        transform: scale(1.1) rotate(-15deg) translate(10%, -100%);
    }
    60% {
        opacity: 1;
        transform: scale(1.2) rotate(-10deg) translate(20%, -200%);
    }
    80% {
        opacity: 0.6;
        transform: scale(1.3) rotate(0deg) translate(0, -300%);
    }
    100% {
        opacity: 0;
        transform: scale(1.4) rotate(10deg) translate(20%, -400%);
    }
}
.cloud-1,
.cloud-2,
.cloud-3 {
    position: absolute;
    left: -25em;
}
.cloud-1 {
    animation: parallax 20s linear infinite reverse -15s;
    top: 25%;
}
.cloud-2 {
    animation: parallax 24s linear infinite reverse -16s;
    bottom: 10%;
}
.cloud-3 {
    animation: parallax 32s linear infinite reverse -10s;
}
.cloud-circle-1 {
    background: #fff;
    border-radius: 50%;
    height: 8em;
    width: 8em;
}
.cloud-circle-2 {
    background: #fff;
    border-radius: 50%;
    height: 12em;
    left: 3em;
    position: absolute;
    top: -5em;
    width: 12em;
}
.cloud-circle-3 {
    background: #fff;
    border-radius: 50%;
    height: 10em;
    left: 10em;
    position: absolute;
    top: -2em;
    width: 10em;
}
.cloud-circle-4 {
    background: #fff;
    height: 2em;
    left: 4em;
    position: absolute;
    top: 6em;
    width: 11em;
}
@keyframes parallax {
    from {
        transform: translateX(-1em);
    }
    to {
        transform: translateX(2300px);
    }
}

</style>

Автор - https://codepen.io/stivaliserna

Кот, показывающий язык

У каждой детали кота есть свой код цвета. Можно поменять окраску котика. В стилях ищем каждую деталь. Например, #head - голова, и цвет у неё #CC6600. Меняем этот цвет на свой. Или #tongue - язык,

цвет языка - pink (розовый), меняем, к примеру, на красный (red). И так каждую деталь.

<div id="container">
  <div id="left-ear" class="ear"></div>
  <div id="right-ear" class="ear"></div>
  <div id="head">
    <div id="left-eye" class="eye"></div>
    <div id="right-eye" class="eye"></div>
    <div id="nose"></div>
    <div id="mouth">
      <div id="tongue"></div>
      <div id="curve-left" class="mouth-curve"></div>
      <div id="curve-right" class="mouth-curve"></div>
      <div id="line"></div>
    </div>
  </div>
</div>
 <style>   
#container {
  margin: auto;
  width: 276px;
}

.ear {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #E67300;
  position: relative;
  display: inline-block;
}

#left-ear {
  transform: rotate(-30deg);
  animation: left-ear-twitch 5s infinite;
}

#right-ear {
  transform: rotate(30deg);
  animation: right-ear-twitch 4s infinite;
}

#head {
  width: 230px;
  height: 220px;
  background: #CC6600;
  border-radius: 50%;
  position: relative;
  left: 23px;
  bottom: 50px;
}

.eye {
  width: 20px;
  height: 40px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 70px;
  animation: blink 8s infinite;
}

#left-eye {
  left: 70px;
}

#right-eye {
  left: 140px;
}

#nose {
  width: 30px;
  height: 20px;
  background: #FF9966;
  border-radius: 50%;
  position: absolute;
  left: 100px;
  top: 130px;
}

#mouth {
  position: absolute;
  top: 150px;
  left: 70px;
}

#line {
  width: 3px;
  height: 23px;
  background-color: black;
  position: absolute;
  left: 43px;
}

.mouth-curve {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  background-color: #CC6600;
  border-style: solid;
  border-width: 3px;
}

#curve-left {
  border-color: transparent transparent black black;
  transform: rotate(-45deg);
}

#curve-right {
  border-left: 3px solid transparent;
  border-right: 3px solid black;
  border-top: 3px solid transparent;
  border-bottom: 3px solid black;
  left: 43px;
  transform: rotate(45deg);
}

#tongue {
  height: 30px;
  width: 30px;
  border-radius: 0 0 15px 15px;
  background-color: pink;
  position: absolute;
  left: 29px;
  top: 20px;
  animation: stick-out-tongue 10s infinite;
}

@keyframes left-ear-twitch {
  0%,
  15% {
    transform: rotate(-30deg);
    left: 5px;
  }
  20% {
    transform: rotate(-35deg);
    left: 0px;
  }
  25%,
  100% {
    transform: rotate(-30deg);
    left: 5px;
  }
}

@keyframes right-ear-twitch {
  0%,
  75% {
    transform: rotate(30deg);
    left: 70px;
  }
  80% {
    transform: rotate(35deg);
    left: 75px;
  }
  85%,
  100% {
    transform: rotate(30deg);
    left: 70px;
  }
}

@keyframes blink {
  0%,
  45% {
    height: 40px;
    top: 70px;
  }
  48% {
    height: 5px;
    top: 105px;
  }
  50%,
  100% {
    height: 40px;
    top: 70px;
  }
}

@keyframes stick-out-tongue {
  0%,
  40% {
    height: 0;
  }
  50% {
    height: 30px;
  }
  60%,
  100% {
    height: 0;
  }
}
  </style>

Автор кода https://codepen.io/cwksophie

Прыгающий суслик

<svg class="gopher" viewBox="0 -150 1200 1700" fill="none" xmlns="http://www.w3.org/2000/svg">
  <ellipse class="shadow" cx="626" cy="1460" rx="280" ry="50" fill="#9B80B4"/>
  <g class="gopher-animation">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M336.843 527.661C315.681 486.87 305.448 404.203 336.843 387.475C368.239 370.747 422.722 400.089 443.884 440.879C465.047 481.669 464.797 523.3 433.402 540.028C402.007 556.756 358.006 568.451 336.843 527.661Z" fill="#A0C6E0" stroke="#675243" stroke-width="5"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M360.931 498.7C348.903 477.633 343.087 434.936 360.931 426.296C378.774 417.657 409.739 432.811 421.767 453.879C433.795 474.946 433.653 496.448 415.809 505.087C397.966 513.727 372.958 519.768 360.931 498.7Z" fill="#C2DFE7"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M769.62 479.414C795.431 441.472 862.912 393.883 892.115 414.285C921.318 434.688 920.991 497.214 895.18 535.156C869.369 573.098 832.877 592.215 803.674 571.812C774.471 551.409 743.809 517.356 769.62 479.414Z" fill="#A0C6E0" stroke="#675243" stroke-width="5"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M810.602 477.327C824.879 457.169 862.205 431.886 878.359 442.725C894.512 453.565 894.331 486.783 880.054 506.941C865.777 527.099 845.591 537.255 829.438 526.416C813.285 515.576 796.324 497.484 810.602 477.327Z" fill="#C2DFE7"/>
    <g class="arms">
      <path class="left-arm" fill-rule="evenodd" clip-rule="evenodd" d="M222.749 1121.94C200.687 1108.9 196.476 1046.08 213.345 981.617C230.214 917.157 261.774 875.472 283.836 888.513C305.898 901.554 310.108 964.381 293.24 1028.84C276.371 1093.3 244.811 1134.99 222.749 1121.94Z" fill="#CBA992" stroke="#675243" stroke-width="5"/>
      <path class="right-arm" fill-rule="evenodd" clip-rule="evenodd" d="M943.415 887.807C971.105 892.431 1004.6 948.751 1018.23 1013.6C1031.87 1078.45 1020.47 1127.27 992.784 1122.65C965.091 1118.02 931.594 1061.71 917.962 996.855C904.33 932.006 915.726 883.183 943.415 887.807Z" fill="#CBA992" stroke="#675243" stroke-width="5"/>
    </g>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M315.625 747.824C315.625 623.008 450.611 521.824 617.125 521.824C783.639 521.824 918.625 623.008 918.625 747.824C918.625 872.64 783.639 973.824 617.125 973.824C450.611 973.824 315.625 872.64 315.625 747.824Z" fill="#91BAE0" stroke="#91BAE0" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
    <g>
      <path class="right-foot" fill-rule="evenodd" clip-rule="evenodd" d="M758.781 1179.38C791.125 1173.99 826.379 1226.72 837.523 1297.17C848.666 1367.62 831.48 1429.11 799.136 1434.5C766.791 1439.9 731.538 1387.15 720.395 1316.7C709.251 1246.25 726.438 1184.77 758.781 1179.38Z" fill="#CBA992" stroke="#675243" stroke-width="5"/>
      <path class="left-foot" fill-rule="evenodd" clip-rule="evenodd" d="M466.881 1162.04C499.583 1163.72 523.261 1222.91 519.767 1294.25C516.272 1365.59 486.929 1422.06 454.227 1420.38C421.525 1418.69 397.847 1359.5 401.342 1288.16C404.835 1216.83 434.179 1160.36 466.881 1162.04Z" fill="#CBA992" stroke="#675243" stroke-width="5"/>
    </g>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M256.591 922.566C256.591 805.838 230.376 686.684 273.059 605.479C326.597 503.621 491.435 443.598 618.611 443.598C736.731 443.598 850.694 489.391 912.01 577.108C969.341 659.125 961.413 777.054 961.413 904.208C961.413 1028.84 988.568 1164.75 933.418 1253.01C872.125 1351.09 760.602 1369.83 640.291 1369.83C496.24 1369.83 336.422 1300.3 286.233 1169.56C256.787 1092.85 256.591 1019.87 256.591 922.566Z" fill="#A0C6E0" stroke="#675243" stroke-width="5"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M252.625 704.326C252.625 619.351 319.359 550.465 401.679 550.465C484 550.465 550.734 619.351 550.734 704.326C550.734 789.301 484 858.187 401.679 858.187C319.359 858.187 252.625 789.301 252.625 704.326Z" fill="white" stroke="#675243" stroke-width="5"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M638.625 704.326C638.625 619.351 705.359 550.465 787.679 550.465C870 550.465 936.734 619.351 936.734 704.326C936.734 789.301 870 858.187 787.679 858.187C705.359 858.187 638.625 789.301 638.625 704.326Z" fill="white" stroke="#675243" stroke-width="5"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M562.239 754.924C562.633 745.254 573.975 742.057 595.69 742.975C617.405 743.894 626.667 751.302 626.273 760.971C625.88 770.641 616.25 772.24 594.536 771.322C572.821 770.404 561.845 764.593 562.239 754.924Z" fill="#2A2A2A" stroke="#2A2A2A" stroke-width="5"/>
    <path class="mouth" fill-rule="evenodd" clip-rule="evenodd" d="M539.625 873.56C539.625 840.017 563.266 812.824 592.428 812.824C621.59 812.824 645.231 840.017 645.231 873.56C645.231 907.104 621.59 934.296 592.428 934.296C563.266 934.296 539.625 907.104 539.625 873.56Z" fill="#2A2A2A" stroke="#2A2A2A" stroke-width="8"/>
    <path opacity="0.936" fill-rule="evenodd" clip-rule="evenodd" d="M570.23 818.605L589.328 817.582L589.57 866.159L570.472 867.181L570.23 818.605Z" fill="white"/>
    <path opacity="0.936" fill-rule="evenodd" clip-rule="evenodd" d="M595.002 818.32L614.1 817.297L614.343 865.874L595.245 866.896L595.002 818.32Z" fill="white"/>
    <path class="tongue" fill-rule="evenodd" clip-rule="evenodd" d="M564.195 897.419C564.195 886.911 582.691 888.637 599.371 888.637C616.05 888.637 624.953 892.765 624.953 903.274C624.953 913.782 609.655 926.692 592.975 926.692C576.296 926.692 564.195 907.928 564.195 897.419Z" fill="#CC4452"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M544.971 796.261C547.106 778.075 570.639 768.322 599.766 771.756C629.966 775.317 649.785 787.939 647.65 806.125C646.43 816.517 640.772 830.207 628.853 830.168C619.912 830.139 606.331 817.835 594.612 815.662C584.825 813.847 568.566 824.64 561.212 822.294C548.019 818.086 543.6 807.938 544.971 796.261Z" fill="#CBA992" stroke="#675243" stroke-width="5"/>
    <path opacity="0.936" fill-rule="evenodd" clip-rule="evenodd" d="M327.625 763.965C327.625 745.992 342.223 731.422 360.231 731.422C378.239 731.422 392.838 745.992 392.838 763.965C392.838 781.938 378.239 796.508 360.231 796.508C342.223 796.508 327.625 781.938 327.625 763.965Z" fill="#262626" stroke="#262626" stroke-width="30"/>
    <path opacity="0.936" fill-rule="evenodd" clip-rule="evenodd" d="M713.625 763.965C713.625 745.992 728.223 731.422 746.231 731.422C764.239 731.422 778.838 745.992 778.838 763.965C778.838 781.938 764.239 796.508 746.231 796.508C728.223 796.508 713.625 781.938 713.625 763.965Z" fill="#262626" stroke="#262626" stroke-width="30"/>
    <path class="belly" fill-rule="evenodd" clip-rule="evenodd" d="M394.625 1114.02C394.625 1019.16 469.271 1016.24 610.91 1023.13C754.74 1030.12 848.824 1050.62 848.824 1145.48C848.824 1240.34 778.649 1302.8 636.865 1302.8C495.081 1302.8 394.625 1208.88 394.625 1114.02Z" fill="#C2DFE7"/>
    <path opacity="0.936" fill-rule="evenodd" clip-rule="evenodd" d="M353.625 736.636C353.625 732.311 359.778 728.805 367.369 728.805C374.959 728.805 381.112 732.311 381.112 736.636C381.112 740.96 374.959 744.466 367.369 744.466C359.778 744.466 353.625 740.96 353.625 736.636Z" fill="white"/>
    <path opacity="0.936" fill-rule="evenodd" clip-rule="evenodd" d="M739.625 736.636C739.625 732.311 745.778 728.805 753.369 728.805C760.959 728.805 767.112 732.311 767.112 736.636C767.112 740.96 760.959 744.466 753.369 744.466C745.778 744.466 739.625 740.96 739.625 736.636Z" fill="white"/>
    <g class="eyes">
      <path class="left-eye" fill-rule="evenodd" clip-rule="evenodd" d="M252.125 703.326C252.125 618.351 318.859 549.465 401.179 549.465C483.5 549.465 550.234 618.351 550.234 703.326C550.234 788.301 483.5 857.187 401.179 857.187C318.859 857.187 252.125 788.301 252.125 703.326Z" fill="#A0C6E0" stroke="#675243" stroke-width="5"/>
      <path class="left-eye" d="M253.293 699.822C298.582 643.976 492.576 652.658 550.735 699.822" stroke="#675243" stroke-width="5"/>
      <path class="right-eye" fill-rule="evenodd" clip-rule="evenodd" d="M638.625 705.275C638.625 620.3 705.359 551.414 787.679 551.414C870 551.414 936.734 620.3 936.734 705.275C936.734 790.25 870 859.136 787.679 859.136C705.359 859.136 638.625 790.25 638.625 705.275Z" fill="#A0C6E0" stroke="#675243" stroke-width="5"/>
      <path class="right-eye" d="M639.293 699.822C684.582 643.976 878.576 652.658 936.735 699.822" stroke="#675243" stroke-width="5"/>
    </g>
  </g>
</svg>
 <style> 
{
  height: 100vh;
}
.gopher {
  height: 20rem;
  width: 20rem;
}

.gopher-animation,
.left-arm,
.right-arm,
.right-foot,
.left-foot,
.belly,
.shadow,
.left-eye,
.right-eye,
.mouth,
.tongue {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.left-eye,
.right-eye {
  animation-name: blink;
}

@keyframes blink {
  0%,
  18%,
  100% {
    visibility: hidden;
  }
  15% {
    visibility: visible;
  }
}

.mouth,
.tongue {
  animation-name: shout;
}

@keyframes shout {
  0%,
  18%,
  100% {
    visibility: hidden;
  }
  10% {
    visibility: visible;
  }
}

.gopher-animation {
  animation-name: jump;
}

@keyframes jump {
  0%,
  15%,
  100% {
    transform: translateY(0);
  }
  6% {
    transform: translateY(5%);
  }
  12% {
    transform: translateY(-30%);
  }
}

.right-arm {
  animation-name: rotateRightArm;
  transform-box: fill-box;
}

@keyframes rotateRightArm {
  0%,
  6%,
  18%,
  100% {
    transform: rotate(0deg); 
  }
  13% {
    transform: rotate(-120deg) translateX(-50%);
  }
}

.left-arm {
  animation-name: rotateLeftArm;
  transform-box: fill-box;
  transform-origin: top right;
}

@keyframes rotateLeftArm {
  0%,
  6%,
  18%,
  100% {
    transform: rotate(0deg); 
  }
  13% {
    transform: rotate(120deg) translateX(50%);
  }
}

.right-foot {
  animation-name: bendRightFoot;
  transform-origin: top left;
}

@keyframes bendRightFoot {
  0%,
  15%,
  100% {
    transform: translateY(0);
  }
  6% {
    transform: translateY(-3%);
  }
  12% {
    transform: translateY(5%) rotate(-5deg);
  }
}


.left-foot {
  animation-name: bendLeftFoot;
  transform-origin: top right;
}

@keyframes bendLeftFoot {
  0%,
  15%,
  100% {
    transform: translateY(0);
  }
  6% {
    transform: translateY(-3%);
  }
  12% {
    transform: translateY(5%) rotate(5deg);
  }
}

.belly {
  animation-name: bounce;
}

@keyframes bounce {
  0%,
  10%,
  15%,
  18%,
  100% {
    transform: translateY(0);
  }
  6% {
    transform: translateY(1%);
  }
  12% {
    transform: translateY(-2%);
  }
  16% {
    transform: translateY(1%);
  }
}

.shadow {
  animation-name: scaleShadow;
  transform-origin: center center;
  transform: scaleX(1);
}

@keyframes scaleShadow {
  0%,
  8%,
  15%,
  100% {
    transform: scaleX(1)
  }
  12% {
    transform: scaleX(0.65)
  }
}
  </style>

Автор - https://codepen.io/stivaliserna

Монстрик, закрывающий глаза

<div class="wrapper">
        <div class="mbody">
            <div class="line_left"></div>
            <div class="left_ear"></div>
            <div class="right_ear"></div>
            <div class="left_eye">
                <div class="left_eyelid"></div>
            </div>
            <div class="right_eye">
                <div class="right_eyelid"></div>
            </div>
            <div class="left_eyeball"></div>
            <div class="right_eyeball"></div>
            <div class="left_nose"></div>
            <div class="right_nose"></div>
            <div class="left_hand">
                <div class="left_paw"></div>
            </div>
            <div class="right_hand">
                <div class="right_paw"></div>
            </div>
        </div>
    </div>
  <style>
 .mbody {
        margin: 100px auto;
        height: 100px;
        width: 130px;
        background-color: #E35C49;
        -webkit-border-radius: 50% 50% 0 0;
        -moz-border-radius: 50% 50% 0 0;
        -ms-border-radius: 50% 50% 0 0;
        -o-border-radius: 50% 50% 0 0;
        border-radius: 50% 50% 0 0;
        position: relative;
    }
    mbody:hover {}
    .line_left {
        width: 30px;
        height: 30px;
        border-bottom-right-radius: 100px;
        border-bottom: 6px solid #E35C49;
        border-right: 6px solid #E35C49;
        position: absolute;
        right: 34px;
        bottom: 99px;
        -webkit-transform: rotate(182deg);
    }
    .left_ear,
    .right_ear {
        height: 35px;
        width: 35px;
        background-color: #E35C49;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
    }
    .left_ear {
        position: absolute;
    }
    .right_ear {
        position: absolute;
        left: 95px;
    }
    .left_eye,
    .right_eye {
        height: 40px;
        width: 40px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        background-color: white;
        overflow: hidden;
    }
    .left_eye {
        position: absolute;
        left: 20px;
        top: 35px;
    }
    .left_eyeball,
    .right_eyeball {
        height: 10px;
        width: 10px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        background-color: black;
    }
    .left_eyeball {
        position: absolute;
        left: 35px;
        top: 64px;
    }
    .right_eyeball {
        position: absolute;
        right: 35px;
        top: 64px;
    }
    .left_eyeball::after {
        content: "";
        position: absolute;
        height: 5px;
        width: 5px;
        border-radius: 50%;
        left: 50%;
        background-color: white;
    }
    .right_eyeball::after {
        content: "";
        position: absolute;
        height: 5px;
        width: 5px;
        border-radius: 50%;
        right: 0%;
        background-color: white;
    }
    .right_eye {
        position: absolute;
        right: 20px;
        top: 35px;
    }
    .left_eyelid,
    .right_eyelid {
        height: 39px;
        width: 39px;
        background-color: #E35C49;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        position: absolute;
        top: -39px;
        -webkit-animation: piscar 1.5s linear infinite alternate;
        animation: piscar 1.5s linear infinite alternate;
    }
    .left_nose,
    .right_nose {
        height: 9px;
        width: 9px;
        background-color: rgb(232, 123, 209);
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3);
    }
    .left_nose {
        position: absolute;
        left: 54px;
        top: 85px;
    }
    .right_nose {
        position: absolute;
        right: 54px;
        top: 85px;
    }
    .left_hand,
    .right_hand {
        width: 50px;
        height: 40px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        background-color: #E35C49;
    }
    .left_hand {
        position: absolute;
        left: -55px;
        top: 85px;
        -webkit-animation: left_hand_action 1.5s linear infinite alternate;
        overflow: hidden;
    }
    .right_hand {
        position: absolute;
        right: -55px;
        top: 85px;
        -webkit-animation: right_hand_action 1.5s linear infinite alternate;
        overflow: hidden;
    }
    .left_paw,
    .right_paw {
        position: absolute;
        width: 10px;
        height: 10px;
        -webkit-border-radius: 30%;
        -moz-border-radius: 30%;
        -ms-border-radius: 30%;
        -o-border-radius: 30%;
        border-radius: 50% 50% 0 0;
        background-color: rgba(255, 255, 255, 0.2);
        box-shadow: 20px 0 0 rgba(255, 255, 255, 0.2);
        bottom: 0;
        left: 10px;
    }
    @-webkit-keyframes piscar {
        0% {
            top: -39px;
        }
        95% {
            top: -39px;
        }
        100% {
            top: -18px;
        }
    }
    @keyframes piscar {
        0% {
            top: -39px;
        }
        95% {
            top: -39px;
        }
        100% {
            top: -18px;
        }
    }
    @-webkit-keyframes left_hand_action {
        100% {
            transform: translate(33px, -33px) rotate(-34deg);
            width: 90px;
            height: 50px;
        }
    }
    @-webkit-keyframes right_hand_action {
        100% {
            transform: translate(-33px, -33px) rotate(34deg);
            width: 90px;
            height: 50px;
        }
    }
 </style>

Монстрику можно поменять окраску.

Красным выделила в коде цвет тела монстра, меняем на свой.

Синим - ноздри на лице

Зверёк, после покраски, может выглядеть, например так:

Автор https://codepen.io/runcelim

Ваши комментарии:

Комментарии со спамом удаляются.