Доброго времени суток, друзья. Сегодня поколдуем с эффектами анимации на CSS ,без  подключения сторонних скриптов и библиотек jQuery. У меня был уже вариант создания анимации картинки.

Так же будем использовать стили для анимации и свойства transition, opacity и scale.

анимация CSS

Каждый из предложенных вариантов , а их сегодня не мало, можно просмотреть в этом редакторе. Скопируйте код каждого и установите в поле редактора для просмотра.

Каждому блоку мы присвоим  id и class. Причем, id можете ставить какой хотите, а class - это и будет нужный эффект. В общем, как обычно. Создаём блок div и для каждого отдельного свои свойства. У меня для примера в блоке div картинка . Но вы можете вставить любой текст, код.

<div id="anim_block" class="slideRight">здесь можно вставить всё что угодно - текст код картинку </div>

Давайте смотреть уже.

1. Анимация в правую сторону 


<div id="anim_block" class="slideRight"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>

<style>
#anim_block{position:absolute;width:250рх;top:95px;lleft:0;}
.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight;

    animation-duration: 2s;
    -webkit-animation-duration: 2s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;   

    visibility: visible !important;
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }         
    100% {
        transform: translateX(0%);
    } 
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }         
    100% {
        -webkit-transform: translateX(0%);
    }
}
</style>


2. Анимация в левую сторону сторону. Изменяем класс в первом коде на "slideLeft"

<div id="anim_block" class="slideLeft"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>

<style>
.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;

    animation-duration: 2s;
    -webkit-animation-duration: 2s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;   

    visibility: visible !important;
}

@keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    50%{
        transform: translateX(-8%);
    }
    65%{
        transform: translateX(4%);
    }
    80%{
        transform: translateX(-4%);
    }
    95%{
        transform: translateX(2%);
    }         
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
    }
    50%{
        -webkit-transform: translateX(-8%);
    }
    65%{
        -webkit-transform: translateX(4%);
    }
    80%{
        -webkit-transform: translateX(-4%);
    }
    95%{
        -webkit-transform: translateX(2%);
    }         
    100% {
        -webkit-transform: translateX(0%);
    }
}
</style>


3. Блок див выпадает сверху. Так же меняем класс ID на slideDown

 <div id="anim_block" class="slideDown"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.slideDown{
    animation-name: slideDown;
    -webkit-animation-name: slideDown;

    animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-timing-function: ease; 
    -webkit-animation-timing-function: ease; 

    visibility: visible !important;                   
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    50%{
        transform: translateY(8%);
    }
    65%{
        transform: translateY(-4%);
    }
    80%{
        transform: translateY(4%);
    }
    95%{
        transform: translateY(-2%);
    }         
    100% {
        transform: translateY(0%);
    }     
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%);
    }
    50%{
        -webkit-transform: translateY(8%);
    }
    65%{
        -webkit-transform: translateY(-4%);
    }
    80%{
        -webkit-transform: translateY(4%);
    }
    95%{
        -webkit-transform: translateY(-2%);
    }         
    100% {
        -webkit-transform: translateY(0%);
    } 
}
</style>


4. Движение блока вверх slideUp

<div id="anim_block" class="slideUp"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.slideUp{
    animation-name: slideUp;
    -webkit-animation-name: slideUp; 

    animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-timing-function: ease; 
    -webkit-animation-timing-function: ease;

    visibility: visible !important;       
}

@keyframes slideUp {
    0% {
        transform: translateY(100%);
    }
    50%{
        transform: translateY(-8%);
    }
    65%{
        transform: translateY(4%);
    }
    80%{
        transform: translateY(-4%);
    }
    95%{
        transform: translateY(2%);
    }         
    100% {
        transform: translateY(0%);
    } 
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
    }
    50%{
        -webkit-transform: translateY(-8%);
    }
    65%{
        -webkit-transform: translateY(4%);
    }
    80%{
        -webkit-transform: translateY(-4%);
    }
    95%{
        -webkit-transform: translateY(2%);
    }         
    100% {
        -webkit-transform: translateY(0%);
    } 
}
</style>


 Ну и ещё немного можно поиграться с кодами.

5. Анимация блока с появлением и с лёгким эффектом раскачивания 

<div id="anim_block" class="bigEntrance"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.bigEntrance{
    animation-name: bigEntrance;
    -webkit-animation-name: bigEntrance; 

    animation-duration: 2s;
    -webkit-animation-duration: 2s;

    animation-timing-function: ease-out; 
    -webkit-animation-timing-function: ease-out; 

    visibility: visible !important;       
}

@keyframes bigEntrance {
    0% {
        transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }
    30% {
        transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);     
        opacity: 1;
    }
    45% {
        transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    60% {
        transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);   
        opacity: 1;
    } 
    75% {
        transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);   
        opacity: 1;
    } 
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }     
}

@-webkit-keyframes bigEntrance {
    0% {
        -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }
    30% {
        -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);     
        opacity: 1;
    }
    45% {
        -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    60% {
        -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);   
        opacity: 1;
    } 
    75% {
        -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);   
        opacity: 1;
    } 
    100% {
        -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }             
}
</style>


6. Блок тоже качается, но немного с другим эффектом

<div id="anim_block" class="hatch"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.hatch{
    animation-name: hatch;
    -webkit-animation-name: hatch;

    animation-duration: 2s;
    -webkit-animation-duration: 2s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;

    visibility: visible !important;   
}

@keyframes hatch {
    0% {
        transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        transform: rotate(2deg) scaleY(1);
    }
    50% {
        transform: rotate(-2deg);
    } 
    65% {
        transform: rotate(1deg);
    } 
    80% {
        transform: rotate(-1deg);
    }     
    100% {
        transform: rotate(0deg);
    }                                 
}

@-webkit-keyframes hatch {
    0% {
        -webkit-transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        -webkit-transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        -webkit-transform: rotate(2deg) scaleY(1);
    }
    50% {
        -webkit-transform: rotate(-2deg);
    } 
    65% {
        -webkit-transform: rotate(1deg);
    } 
    80% {
        -webkit-transform: rotate(-1deg);
    }     
    100% {
        -webkit-transform: rotate(0deg);
    }     
}
</style>


7. Тут прыжок вверх и падение

<div id="anim_block" class="bounce"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.bounce{
    animation-name: bounce;
    -webkit-animation-name: bounce;

    animation-duration: 1.6s; 
    -webkit-animation-duration: 1.6s;

    animation-timing-function: ease; 
    -webkit-animation-timing-function: ease; 
   
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;   
}

@keyframes bounce {
    0% {
        transform: translateY(0%) scaleY(0.6);
    }
    60%{
        transform: translateY(-100%) scaleY(1.1);
    }
    70%{
        transform: translateY(0%) scaleY(0.95) scaleX(1.05);
    }
    80%{
        transform: translateY(0%) scaleY(1.05) scaleX(1);
    } 
    90%{
        transform: translateY(0%) scaleY(0.95) scaleX(1);
    }             
    100%{
        transform: translateY(0%) scaleY(1) scaleX(1);
    } 
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translateY(0%) scaleY(0.6);
    }
    60%{
        -webkit-transform: translateY(-100%) scaleY(1.1);
    }
    70%{
        -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
    }
    80%{
        -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
    } 
    90%{
        -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
    }             
    100%{
        -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
    }     
}
</style>


8. Блок качается непрерывно

<div id="anim_block" class="tossing"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.tossing{
    animation-name: tossing;
    -webkit-animation-name: tossing; 

    animation-duration: 2.5s; 
    -webkit-animation-duration: 2.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
    0% {
        transform: rotate(-4deg); 
    }
    50% {
        transform: rotate(4deg);
    }
    100% {
        transform: rotate(-4deg); 
    }                     
}

@-webkit-keyframes tossing {
    0% {
        -webkit-transform: rotate(-4deg); 
    }
    50% {
        -webkit-transform: rotate(4deg);
    }
    100% {
        -webkit-transform: rotate(-4deg); 
    }             
}
</style>


9. Ещё один эффект появления блока

<div id="anim_block" class="pullUp"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.pullUp{
    animation-name: pullUp;
    -webkit-animation-name: pullUp;

    animation-duration: 3s;
    -webkit-animation-duration: 3s;

    animation-timing-function: ease-out; 
    -webkit-animation-timing-function: ease-out; 

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;       
}

@keyframes pullUp {
    0% {
        transform: scaleY(0.1);
    }
    40% {
        transform: scaleY(1.02);
    }
    60% {
        transform: scaleY(0.98);
    }
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(0.98);
    }             
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(1);
    }                         
}

@-webkit-keyframes pullUp {
    0% {
        -webkit-transform: scaleY(0.1);
    }
    40% {
        -webkit-transform: scaleY(1.02);
    }
    60% {
        -webkit-transform: scaleY(0.98);
    }
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(0.98);
    }             
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(1);
    }     
}
</style>


10. Движение блока вверх с расширением до полного размера.

<div id="anim_block" class="slideExpandUp"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.slideExpandUp{
    animation-name: slideExpandUp;
    -webkit-animation-name: slideExpandUp;

    animation-duration: 3s;
    -webkit-animation-duration: 3s;

    animation-timing-function: ease-out; 
    -webkit-animation-timing-function: ease -out;

    visibility: visible !important;
}

@keyframes slideExpandUp {
    0% {
        transform: translateY(100%) scaleX(0.5);
    }
    30%{
        transform: translateY(-8%) scaleX(0.5);
    } 
    40%{
        transform: translateY(2%) scaleX(0.5);
    }
    50%{
        transform: translateY(0%) scaleX(1.1);
    }
    60%{
        transform: translateY(0%) scaleX(0.9);   
    }
    70% {
        transform: translateY(0%) scaleX(1.05);
    }         
    80%{
        transform: translateY(0%) scaleX(0.95);   
    }
    90% {
        transform: translateY(0%) scaleX(1.02);
    } 
    100%{
        transform: translateY(0%) scaleX(1);     
    }
}

@-webkit-keyframes slideExpandUp {
    0% {
        -webkit-transform: translateY(100%) scaleX(0.5);
    }
    30%{
        -webkit-transform: translateY(-8%) scaleX(0.5);
    } 
    40%{
        -webkit-transform: translateY(2%) scaleX(0.5);
    }
    50%{
        -webkit-transform: translateY(0%) scaleX(1.1);
    }
    60%{
        -webkit-transform: translateY(0%) scaleX(0.9);   
    }
    70% {
        -webkit-transform: translateY(0%) scaleX(1.05);
    }         
    80%{
        -webkit-transform: translateY(0%) scaleX(0.95);   
    }
    90% {
        -webkit-transform: translateY(0%) scaleX(1.02);
    } 
    100%{
        -webkit-transform: translateY(0%) scaleX(1);     
    }
}
</style>


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

При установке нужного варианта в сообщение или гаджет HTML/JavaScript нужно изменить индивидуально свойства расположения блока. У всех будет по разному. Я отметила в первом коде строку

#anim_block{position:absolute;width:250рх;top:95px;lleft:0;}

Советую прочитать эту статью. Или найти информацию в интернете, её достаточно много.  
Скорость анимации в каждом коде тоже настраиваемая такие параметры 2s; 4s; и так далее.

Вот такие варианты анимации появления элементов в блоге.

В последующих постах покажу ещё несколько решений.  Всем добра и до встречи. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


Доброго времени суток. Хочу предложить вам, как можно с помощью CSS. красиво оформить блок с картинкой и нужным текстом. Сразу скажу, что такой вариант оформления, прекрасно отображается на экранах разного размера. Код совершенно простой и всё разберём ниже. 

блок с картинкой и описанием

Вы наглядно можете посмотреть пример. Скопируйте приведённый ниже код и установите в этом редакторе. На размер ширины внимание не обращайте. На вашей странице блога, будет выглядеть, как на картинке выше.

<div class="img-section">
<img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> 

<div class="img-data">
<span style="background-color: white; color: #303030; font-family: &quot;verdana&quot; , sans-serif; font-size: 16px; letter-spacing: 0.3px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis.</span><br />
<br /></div>
</div>
<style>
.img-section {
    width: 100%;
    background: linear-gradient(135deg, #00897B 0%, #00897B 40%, #FFF 40%, #FFF 100%);
    display: flex;
    align-items: center;
    margin: 20px 0;
} .img-section img {
    border: 12px solid rgba(204, 255, 144, 0.8);
    box-shadow: 5px 7px 16px rgba(0, 0, 0, 0.7);
    margin: 40px;
    box-sizing: border-box;
    flex: 0 0 45%;
    width: 45%;
} .img-section .img-data {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    padding: 20px;
}
@media only screen and (max-width: 700px) {
    .img-section {
        flex-flow: row wrap;
    }
    .img-section .img-data {
        background: #FFF;
        border-bottom: 5px solid #AED581;
    }
    .img-section img {
        margin: 40px auto;
        flex: 0 0 80%;
        width: 80%;
    }
}
</style>


В строке, отмеченной розовым цветом, вставьте адрес вашей картинки.

Синим цветом выделен сам отображаемый текст.

Обратите внимание, что в примере высота картинки height="200". Соответственно высота области с текстом будет такая же.

Можно поэкспериментировать со значением linear-gradient. Почитаете здесь.

Можно подобрать свои решения, относительно цвета и размеров тени  box-shadow: 5px 7px 16px rgba(0, 0, 0, 0.7); и border: 12px solid rgba(204, 255, 144, 0.8) рамки.

Размер текста можно заменить на другой  font-size: 16px;

Вот такие не сложные настройки. И выглядит достаточно красиво, аккуратно и профессионально.

В редакторе сообщения код вставляется в формате HTML. Если пропустили, прочитайте как просто вставлять коды в сообщениях.

Всем добра и до встречи. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


Доброго времени суток, дорогие читатели. Оригинальная кнопка вверх для блога во всю ширину страницы. Вполне современный дизайн. Думаю, что вашим посетителям понравится такое не стандартное решение кнопки вверх которая появится при скроллинге страницы. 
оригинальная кнопка вверх на всю ширину

Установка займёт считанные минуты, да и настройки внешнего вида тоже. Чтобы посмотреть, как она выглядит и проверить её в работе, перейдите на тестовый блог

Код

<script type="text/javascript">$('body').append('<div class="upbtn"></div>');         

$(window).scroll(function() {

    if ($(this).scrollTop() > 350) {

        $('.upbtn').css({

            bottom: 0

        });

        } else {

        $('.upbtn').css({

            bottom: '-80px'

        });

    }

});

$('.upbtn').on('click',function() {

    $('html, body').animate({

        scrollTop: 0

    }, 500);

    return false;

});</script>



<style>.upbtn {

    z-index: 9999;

    width: 100%;

    height: 16px;

    color: #FFF;

    position: fixed;

    bottom: -80px;

    cursor: pointer;

    background: #4e9c60;

    transition: all .3s ease-in-out;

}

.upbtn:before {

    content: "";

    transition: all .3s ease-in-out;

    z-index: 9999;

 

    width: 100px;

    height: 100px;

    border: 14px solid #4e9c60;

    position:relative;

    bottom:10px;

    left: 50%;

    margin-left: -50px;

    cursor: pointer;

    display:block;

    transform: rotate(45deg);

    background: #FFF;

}

.upbtn:hover {

    height: 20px;

}

.upbtn:hover:before {

    bottom:12px;

}</style>


Отрегулируйте на каком расстоянии при прокрутке она будет появляться. В моём случае это значение 350

В двух местах замените цвет на желаемый. В примере  #4e9c60

Готовый код устанавливайте в гаджет HTML/JavaScript , где нибудь в самом низу макета блога.

10 вариантов кнопки вверх для Блоггер
Оригинальная кнопка вверх/ вниз

Всем добра и до встречи. Не болейте, берегите себя и близких.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


Привет, друзья. Весна всё же и как без котиков. У всех они всякие разные, а у меня сегодня для вас котики сделанные с помощью CSS. Столько накопилось их у меня в черновиках, что вот решила, пора раздавать. Так, чисто для демонстрации, а может у кого и на блоге приживутся.

котики на сайте

Не стала этих котиков отдельно выкладывать и собрала небольшую кошачью компанию.

Предлагаю 3 варианта.

1. Просто вот такой розовый котик

Это код
<div id="container">
<div id="tail">
</div>
<div id="tail-mask">
</div>
<div id="tail-end">
</div>
<div id="body">
<div class="ear" id="ear-left">
<div class="ear-inner" id="ear-inner-left">
</div>
</div>
<div class="ear" id="ear-right">
<div class="ear-inner" id="ear-inner-right">
</div>
</div>
<div id="mask">
</div>
<div id="patch">
<div class="fur">
</div>
<div class="fur">
</div>
<div class="fur">
</div>
</div>
<div id="eyes">
<div class="eye" id="eye-left">
<div class="shine" id="shine-left">
</div>
</div>
<div class="eye" id="eye-right">
<div class="shine" id="shine-right">
</div>
</div>
</div>
<div id="whisk-left">
<div class="whisker" id="whisk-one">
</div>
<div class="whisker">
</div>
<div class="whisker" id="whisk-three">
</div>
</div>
<div id="nose">
</div>
<div id="whisk-right">
<div class="whisker" id="whisk-four">
</div>
<div class="whisker">
</div>
<div class="whisker" id="whisk-six">
</div>
</div>
<div id="smile">
<div id="smile-left-align">
<div id="smile-left">
</div>
<div id="mask-left">
</div>
</div>
<div id="smile-right-align">
<div id="smile-right">
</div>
<div id="mask-right">
</div>
</div>
</div>
<div id="tongue">
</div>
<div id="tummy">
</div>
</div>
</div>
<style>
#container {
  margin: 90px auto;
  height: 175px;
  width: 170px;
}
#tail {
  position: absolute;
  margin-left: 40px;
  margin-top: 40px;
  height: 60px;
  width: 80px;
  border: 15px solid #D3B897;
  border-radius: 50px;
  display: inline-block;
  z-index: 0;
}
#tail-mask {

  position: absolute;

  margin-top: 40px;

  margin-left: 100px;

  height: 30px;

  width: 75px;

  background-color: #fff;

  z-index: 0;
}
#tail-end {

  position: absolute;

  margin-top: 63px;

  margin-left: 130px;

  height: 17px;

  width: 17px;

  border-radius: 50%;

  background-color: #D3B897;

  z-index: 1;

}
#body {

  position: relative;

  height: 130px;

  width: 110px;

  background-color: #E9CBA7;

  border-radius: 22px;

  display: inline-block;

  overflow: hide;

  z-index: 1;

}
.ear {

  position: relative;

  margin-top: -20px;

  height: 45px;

  width: 50px;

  background-color: #E9CBA7;

  display: inline-block;

  z-index: 2;
}
#ear-left {

  clip-path: polygon(0 0, 0% 100%, 100% 60%);
}
#ear-right {

  margin-left: 6px;

  clip-path: polygon(100% 0, 0% 60%, 100% 100%);

}
.ear-inner {

  position: relative;

  height: 30px;

  width: 50px;

  background-color: #D3B897;

  z-index: 3;

}
#ear-inner-left {

  margin-top: 8px;

  margin-left: 5px;

  clip-path: polygon(0 0, 100% 90%, 0 100%);

}

#ear-inner-right {

  margin-top: 8px;

  margin-left: -4px;

  clip-path: polygon(100% 0%, 100% 100%, 0 90%);

}
#mask {

  position: relative;

  background-color: #E9CBA7;

  margin-top: -29px;

  height: 50px;

  width: 110px;

  border-radius: 50%;

  z-index: 4;

}
#patch {

  position: relative;

  margin-top: -50px;

  z-index: 5;

}
.fur {

  width: 5px;

  background-color: #C0A98B;

  display: inline-block;

}
.fur:first-of-type {

  margin-left: 40%;

  height: 15px;

  float: left;

}
.fur:nth-of-type(2) {

  margin-left: 4px;

  height: 5px;

  float: left;

}

.fur:nth-of-type(3) {

  margin-left: 4px;

  height: 10px;

  float: left;

}
#eyes {

  position: relative;

  margin-top: 30%;

  z-index: 5;

}

.eye {

  height: 18px;

  width: 18px;

  border-radius: 50%;

  background-color: #554D44;

  display: inline-block;

}
#eye-left {

  margin-left: 27%;

}
#eye-right {

  margin-left: 10%;

}

.shine {

  height: 7px;

  width: 7px;

  border-radius: 50%;

  background-color: #fff;

  margin-top: 2px;

  margin-left: 1px;

}

#whisk-left {

  display: inline-block;

}

.whisker {

  height: 3px;

  width: 25px;

  background-color: #D3B897;

  margin-bottom: 6px;

}

#whisk-one {

  transform: rotate(15deg);

}

#whisk-three {

  transform: rotate(-15deg);

}

#nose {

  position: absolute;

  margin-left: 15%;

  height: 17px;

  width: 18px;

  background-color: #554D44;

  clip-path: ellipse(40% 22% at 50% 50%);

  display: inline-block;

  z-index: 6;

}

#whisk-right {

  display: inline-block;

  margin-left: 56px;

}

#whisk-four {

  transform: rotate(-15deg);

}

#whisk-six {

  transform: rotate(15deg);

}

#smile {

  position: relative;

  margin-left: 29%;

  margin-top: -22%;

  z-index: 5;

}

#smile-left-align {

  display: inline-block;

  position: absolute;

}

#smile-left {

  height: 10px;

  width: 20px;

  border-radius: 0 0 10px 10px;

  background-color: #E9CBA7;

  border: 2px solid #554D44;

}

#mask-left {

  margin-top: -58%;

  height: 4px;

  width: 20px;

  background-color: #E9CBA7;

}



#smile-right-align {

  display: inline-block;

  margin-left: 22px;

  position: absolute;

}

#smile-right {

  height: 10px;

  width: 20px;

  border-radius: 0 0 10px 10px;

  background-color: #E9CBA7;

  border: 2px solid #554D44;

}



#mask-right {

  margin-top: -58%;

  height: 4px;

  width: 24px;

  background-color: #E9CBA7;

}

#tongue {

  position: relative;

  margin-top: 7px;

  margin-left: auto;

  margin-right: auto;

  height: 17px;

  width: 15px;

  border-radius: 25px;

  background-color: #FC90A5;

  z-index: 4;

}


#tummy {

  margin-top: 13%;

  margin-left: auto;

  margin-right: auto;

  height: 30px;

  width: 60px;

  border-radius: 50px 50px 0 0;

  background-color: #F4E7D1;

}

#credit {

  position: absolute;

  font-family: sans-serif;

  font-size: 12px;

  color: #B9B9B9;

  margin-top: 70px;

  left: 20px;

}
a,

a:visited {

  text-decoration: none;

  color: #FC90A5;

}

a:focus,

a:hover {

  color: #DC7E91;

}</style>




2. Милый чёрный котик будет вращать зелёными глазками.

Здесь картинка. Для наглядного примера скопируйте код и установите в этом редакторе.

<div class='wrapper'>
  <div class='cat'>
    <div class='head'>
    <div class='eyes'>
        <div class='eyeleft'>
       <div class='eyeinner'>
         <div class='iris'></div>
          </div>
      </div>
        <div class='eyeright'>
      <div class='eyeinner'>
           <div class='iris'></div></div>
      </div>
      </div>
      <div class='nose'></div>
      <div class='mouth'>
        <div class='mleft'>         </div>
        <div      class='mright'></div>
      </div>
    </div>
    <div class='body'>
     
    </div>
 <div class='tail'>
        <div class='circle'>
   <div class='innercircle'></div>
   </div>
     
      </div>

  </div>
</div>
<style>
.wrapper{
  width:50%;
  margin:0 auto;
  text-align:center;
}
.cat{
opacity: 0.8;
  padding:40px;
}
.head{
 padding-top:4px;
  position:relative;
  margin:0 auto;
  background-color:black;
  width:60px;
  height:40px;
    border-radius:20% 20% 100% 100%;
}
.head:before{
  position:absolute;
  content:'';
  border:10px solid black;
 top:-15px;
  left:0px;
  border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color:black;
    border-left-color: black;
}
.head:after{
  position:absolute;
  content:'';
  border:10px solid black;
 top:-15px;
  right:0px;
  border-top-color: transparent;
    border-right-color: black;
    border-bottom-color:black;
    border-left-color: transparent;
}
.eyes{
  overflow:hidden;
  padding-top:7px;
}

.eyeleft{
 
   border-radius: 30% 100% ;
  float:left;
  position:absolute;
  left:10px;
  width:15px;
  height:12px;
  background-color: #57c65c;
  display:block;

}

 .eyeright{
 
  border-radius: 100% 30% ;
  float:right;
    background-color:#57c65c;
  display:block;
  width:15px;
  height:12px;
  position:absolute;
 right:10px;
}

.eyeinner{
animation: eyes 2s ease-in-out  infinite;
  width:6px;
  height:10px;
  background-color:black;
  border-radius:100%;
 margin: 0 auto;

}
.iris{
  background-color:#fff;
  width:1.5px;
  height:6px;
  border-radius:100%;
}
.nose{
  width:5px;
  height:3px;
  background-color:pink;
  border-radius:50%;
  margin:0 auto;
  position:relative;
    top:15px;
}
@keyframes eyes{
  50%{
    width:7px;
  }

  100% {
    width:10px;
  }
}
@keyframes iris{
  100%{
    width:3px;
  }
}
.mouth{
 width:14px;
   position:relative;
  top:16px;
margin:0 auto;
}
.mleft, .mright{

  width:5px;
  height:5px;
 border:1px solid;

  border-radius:50%;
 
}
.mleft{
  border-top-color:transparent;
  border-left-color:transparent;
   border-right-color:gray;
  border-bottom-color:gray;
  float:left;
}
.mright{
  float:left;
  border-top-color:transparent;
  border-right-color:transparent;
   border-left-color:gray;
  border-bottom-color:gray;
}
.body{
  position:relative;
  border-radius:50% 50% 0% 50%;
  background-color:black;
  width:40px;
  height:100px;
  margin:0 auto;
}
.tail{
  z-index:-100;
  top:10px;
 display:inline-block;
position:absolute;
  width:100px;
  height:100px;

}
.circle{
  position:relative;
  width:100px;
  height:120px;
  border:3px solid black;
  border-radius:50%;
  border-bottom-color:transparent;
  left:-1px;

}
.innercircle{
  position:absolute;
   width:60px;
  height:60px;
  border:3px solid black;
   border-right-color:transparent;
  border-radius:50%;
  bottom:5px;
  right:4px;
}
.innercircle:after{
  position:absolute;
  content: ' ';
  width:7px;
  height:10px;
  background-color:black;
  left:50px;
  top:6px;
  border-radius:50%;
}</style>


3. Кот программист. 


Так же установите код в редакторе для просмотра того, что он умеет делать.

<svg id="bongo-cat" viewbox="0 0 787.3 433.8" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol data-name="eye" id="eye" viewbox="0 0 19.2 18.7">
            <circle cx="9.4" cy="9.1" r="8"></circle>
            <path d="M16.3,5.1a1.3,1.3,0,0,1-1.4-.3,7.2,7.2,0,0,0-4.5-2.6A7.2,7.2,0,0,0,5.5,3.5,6.8,6.8,0,0,0,2.8,7.8a6.8,6.8,0,0,0,1,4.8,6.2,6.2,0,0,0,4,2.7,6.1,6.1,0,0,0,4.6-.7,6.7,6.7,0,0,0,2.9-3.7,6.4,6.4,0,0,0-.5-4.5c-.1-.2.8-1,1.5-1.3s2.2,0,2.3.5a9.4,9.4,0,0,1-.2,7.2,9.4,9.4,0,0,1-5.1,5.1,9,9,0,0,1-7,.2A9.6,9.6,0,0,1,1,13.5,9.2,9.2,0,0,1,.4,6.6,8.9,8.9,0,0,1,4.6,1.3,9,9,0,0,1,11.2.2,9.3,9.3,0,0,1,16.7,4C16.9,4.3,17,4.8,16.3,5.1Z"></path>
        </symbol>
        <symbol data-name="paw-pads" id="paw-pads" viewbox="0 0 31.4 33.9">
            <path d="M6.8,16a3.7,3.7,0,0,1,1.1,2.8,3.2,3.2,0,0,1-1.6,2.6L5,21.8H4.4a2.8,2.8,0,0,1-1.8.3A4.2,4.2,0,0,1,.2,19.1,7.7,7.7,0,0,1,0,17.6a2.8,2.8,0,0,1,.6-
2,3.2,3.2,0,0,1,2.1-.8H4A5,5,0,0,1,6.8,16Zm7.3-4.8a1.8,1.8,0,0,0,.7-.5l.7-.4a3.5,3.5,0,0,0,1.1-1,3.2,3.2,0,0,0,.3-1.4,1.4,1.4,0,0,0-.2-.6,3.4,3.4,0,0,0-.3-2.4,3.2,3.2,0,0,0-2.1-1.5H13.1a4.7,4.7,0,0,0-1.6.4,2,2,0,0,0-.9.9l-.4.6v.4a6.1,6.1,0,0,0-.5,1.2,4.3,4.3,0,0,0,0,1.6,3.5,3.5,0,0,0,.5,2l.7.6a3.3,3.3,0,0,0,1.7.7A3,3,0,0,0,14.1,11.2ZM22.7,7l.6.2h.3A2.3,2.3,0,0,0,25,6.8l.4-.3.6-.3a7.5,7.5,0,0,0,1.5-.9,4.2,4.2,0,0,0,.8-1.2,1.9,1.9,0,0,0,.1-1.5A2.6,2.6,0,0,0,27.5,1,3.5,3.5,0,0,0,23.6.3a3.8,3.8,0,0,0-2,1.5,4.8,4.8,0,0,0-.7,2,3.6,3.6,0,0,0,.9,2.6ZM31,24.1a13.5,13.5,0,0,0-2.2-4.7,36.6,36.6,0,0,0-3.2-3.9,5.3,5.3,0,0,0-5-1.9,10.5,10.5,0,0,0-4.5,2.2A5.6,5.6,0,0,0,13.5,20a15.1,15.1,0,0,0,1.2,6.3c.8,2,1.7,4,2.6,5.9a1.6,1.6,0,0,0,1.5.8,1.7,1.7,0,0,0,1.9.9,17.1,17.1,0,0,0,8.7-4.8,8.2,8.2,0,0,0,1.7-2C31.6,26.3,31.3,25,31,24.1Z" fill="#ef97b0"></path>
        </symbol>
    </defs>
    <g id="head">
        <g id="head__outline">
            <path d="M303.2,186.3c4-7,14.8-20.2,20-26,17-19,34.6-34.9,43-41l12-8s16.6-32,21-33c9-2,33,22,33,22s20-9,79,7c41,11.1,47,14,57,22,7.5,6,18,16,18,16s33.7-19.5,41-15-2,66-2,66,5.9,12.9,11,22c9.1,16.2,13.6,20.2,19,31,3.6,7.2,8.4,28.5,10.5,43.5l-385-62Z" fill="#fff"></path>
            <path d="M302.9,186.9c-1.2,3-5.9,12.6-9,18.8l-12.5,25.5-.6-1.2c32.2,4.8,64.4,9.2,96.6,13.6s64.4,8.9,96.5,13.7,64.3,9.7,96.4,14.9,64.1,10.5,96.2,15.8l-5.6,5.5c-1.2-8.5-2.8-17.1-4.8-25.6-1-4.1-2.1-8.4-3.4-12.3l-.5-1.4-.5-1.4-.6-1.3-.7-1.3a59.5,59.5,0,0,0-3.1-5.5c-2.2-3.6-4.7-7.2-7.1-11s-4.8-7.6-7-11.5c-4.5-7.9-8.3-15.9-12.1-24a4,4,0,0,1-.3-2.6h0c1.4-9.1,2.7-18.2,3.7-27.4.5-4.5.9-9.1,1.2-13.7s.4-9.1.2-13.4a26.4,26.4,0,0,0-.8-6,8.1,8.1,0,0,0-.3-1.1c-.1-.3-.2-.4-.1-.3h.3c0,.1.1.1,0,.1h-.6a11.9,11.9,0,0,0-2.5.2,16.3,16.3,0,0,0-3,.7,56.7,56.7,0,0,0-6.2,2.1,212.6,212.6,0,0,0-24.5,11.9h-.1a3.9,3.9,0,0,1-4.7-.6c-4.9-4.7-10-9.4-15.1-13.8a86.6,86.6,0,0,0-7.9-6,46.1,46.1,0,0,0-8.5-4.6c-6-2.6-12.6-4.6-19.2-6.7l-19.8-5.7a324.9,324.9,0,0,0-40-8.9,196.8,196.8,0,0,0-20.2-1.8c-1.7,0-3.4-.1-5.1,0h-2.5l-2.5.2-2.5.2-2.4.4-2.4.5-1.1.3h-.5l-.4.2H433a2.5,2.5,0,0,1-2.6-.7c-4.6-4.6-9.5-9.1-14.5-13.2a82.7,82.7,0,0,0-7.9-5.7L403.9,81a10.8,10.8,0,0,0-4-.9c-.1,0-.3,0-.3.1h0l-.7.5-1.5,1.7c-1,1.2-2,2.6-2.9,3.9s-3.6,5.5-5.3,8.3c-3.5,5.7-6.8,11.4-9.9,17.3h0l-.4.4-10.2,6.6a53.6,53.6,0,0,0-4.9,3.4l-4.6,3.8c-6.2,5.1-12.1,10.6-17.9,16.2s-11.3,11.4-16.7,17.4c-2.7,3-5.3,6.1-7.8,9.2s-5,6.3-7.4,9.5c-4.2,5.6-7,10-5.7,7.1a34.1,34.1,0,0,1,2.1-3.8l3.8-5.6c2.9-4,6.3-8.3,8.5-10.9s4.4-5.2,6.7-7.7l6.9-7.4c4.7-4.9,9.4-9.7,14.3-14.3s9.8-9.3,15-13.7l4-3.2,4.2-2.9,8.3-5.7-.4.4c3-5.9,6.1-11.8,9.4-17.7,1.6-2.9,3.3-5.8,5.1-8.6l2.9-4.3,1.8-2a7.5,7.5,0,0,1,1.3-1.1c.1-.2.6-.4,1-.5l.9-.2h1.7l1.4.2,2.7.8c1.7.7,3.3,1.5,4.8,2.3a84,84,0,0,1,8.5,5.7A175.7,175.7,0,0,1,434,98.5l-2.9-.6.8-.3.7-.2L434,97l2.7-.7,2.7-.5a23,23,0,0,1,2.6-.3l2.7-.3,2.7-.2h5.3a182.1,182.1,0,0,1,21,1.3,332.5,332.5,0,0,1,41.1,8.4l20,5.5c6.7,2,13.4,4,20.1,6.7a65.3,65.3,0,0,1,9.8,5.1c3.1,2.1,5.9,4.3,8.6,6.5,5.4,4.5,10.6,9.2,15.7,14l-4.8-.6c4.1-2.4,8.2-4.6,12.4-6.7s8.6-4.2,13-6c2.3-.9,4.6-1.7,7-2.4a23.4,23.4,0,0,1,3.8-.9,20,20,0,0,1,4.4-.4h1.3l1.5.4a5.1,5.1,0,0,1,1.7.7l.9.7.8.7a8.3,8.3,0,0,1,1.6,2.6,12.7,12.7,0,0,1,.8,2.3,44.6,44.6,0,0,1,1.1,7.7c.2,5,.1,9.7-.1,14.4s-.7,9.5-1.2,14.1c-.9,9.4-2.1,18.6-3.6,27.9l-.3-2.6c3.7,7.9,7.5,15.8,11.8,23.3,2.1,3.7,4.4,7.4,6.8,11s4.9,7.2,7.3,11.1c1.3,2,2.4,4,3.5,6.1a10.9,10.9,0,0,0,.8,1.5l.8,1.8.7,1.7.6,1.7c1.5,4.4,2.6,8.7,3.7,13.1a262,262,0,0,1,5.2,26.4,4.9,4.9,0,0,1-4.1,5.6h-1.5c-32.1-5-64.2-9.9-96.3-15.1s-64.1-10.6-96.1-16.1-64-11.4-96-17.4-63.9-11.9-95.9-17.4h-.1a.8.8,0,0,1-.6-.9v-.2l16.6-32.1C299.8,192.2,304.1,183.9,302.9,186.9Z"></path>
        </g>
        <g id="head__face">
            <g id="eyes">
                <use height="18.7" transform="translate(474.8 195.2)" width="19.2" xlink:href="#eye"></use>
                <use height="18.7" transform="matrix(-0.51, -0.85, 0.82, -0.5, 370.39, 192.59)" width="19.2" xlink:href="#eye"></use>
            </g>
            <g id="mouth">
                <path d="M399.2,186.3c.9,3.6,2.6,7.8,6,9,6.4,2.3,19-6,19-6s4.1,12.4,10,15,10.7-1.7,16-6" fill="#fff"></path>
                <path d="M450.2,198.3c.6,1.2.2,1.9-.2,2.2a36.7,36.7,0,0,1-7.6,4.9,14.9,14.9,0,0,1-4.8,1.4h-1.4l-1.3-.2-1.4-.4-1.3-.6a21.6,21.6,0,0,1-6.4-7.2,52.8,52.8,0,0,1-4-8.3l3.8,1.3a62.3,62.3,0,0,1-7.1,4.1,32.1,32.1,0,0,1-7.9,2.8,13.2,13.2,0,0,1-4.9.2l-1.4-.3a7.5,7.5,0,0,1-1.3-.6,7.9,7.9,0,0,1-2.3-1.6,16.8,16.8,0,0,1-2.9-4,24.1,24.1,0,0,1-1.6-4.2c-.1-.5,1.6-1.3,3-1.4s3.5.2,3.6.6a10.3,10.3,0,0,0,2.6,4.9l.7.5h2.4l1.5-.2a28.4,28.4,0,0,0,6.5-2c2.1-1,4.3-2.1,6.3-3.3h.1a2.5,2.5,0,0,1,3.4.9l.3.5a43.1,43.1,0,0,0,3.2,7.7,19.8,19.8,0,0,0,2.2,3.4,8.1,8.1,0,0,0,2.6,2.6,5,5,0,0,0,3,.7,10.8,10.8,0,0,0,3.7-1,33.4,33.4,0,0,0,7.2-4.3C448.8,197.4,449.5,197.2,450.2,198.3Z"></path>
            </g>
        </g>
    </g>
    <g id="table">
        <path d="M65.7,181.8l714,124c0,74-2,54-2,128l-673-161Z" fill="#fff"></path>
        <path d="M786.7,304.2c-2.7,1.2-10.8,0-16.1-.9L31.1,176.4c-5.2-.9-8.9-3.8-6.2-5s14.3-1.4,19.5-.5L777.1,300.6C782.3,301.6,789.4,303.1,786.7,304.2Z"></path>
    </g>
    <g id="laptop">
        <g id="laptop__base">
            <polygon fill="#f2f2f2" points="641.9 304.1 454.7 348.2 103.8 271.3 254.6 230.3 641.9 304.1"></polygon>
            <path d="M641.9,304.1c1.5-.1-2.3,1.5-10.3,3.6-28.9,7.5-58.1,15.2-87.7,22.6s-59.1,14.5-88.4,21.3l-.8.2-.8-.2-349.5-78-1.1-.2-8.7-1.9,8.6-2.3,150.6-41.5.6-.2h.7c62.5,11.7,125.5,23.6,188.4,35.9s125.6,25.1,188,37.6c8,1.6,11.9,3,10.4,3a185.6,185.6,0,0,1-18.4-2.6c-61.9-11.2-123.6-22.2-185-33.5s-122.7-23.1-184.4-35h1.2L104.4,273.4h-.1v-4.3l351.2,75.7h-1.5c28.3-6.7,56.3-13.3,84.3-19.5s56.5-12,85.2-18.1C631.3,305.6,640.4,304.1,641.9,304.1Z" fill="#231f20"></path>
        </g>
        <g id="laptop__keyboard">
            <polygon fill="#3e3e54" points="371.1 274.8 256.8 253.5 257 252.7 266.2 251.1 382.4 271.5 382.3 272.3 371.1 274.8"></polygon>
            <polygon fill="#3e3e54" points="237.4 265.6 221.3 262.4 221.4 261.7 230.2 260.2 246.8 262.6 246.6 263.4 237.4 265.6"></polygon>
            <polygon fill="#3e3e54" points="474.6 312.9 249.9 268.1 250.1 267.3 259.2 265.8 487.7 309.6 487.5 310.5 474.6 312.9"></polygon>
            <polygon fill="#3e3e54" points="411.8 309.4 204.2 266.7 204.4 266 212.9 264.5 423.9 306.3 423.7 307.2 411.8 309.4"></polygon>
            <polygon fill="#3e3e54" points="450 317.3 428.5 312.9 428.8 312 440.7 310.6 462.7 314.1 462.5 315 450 317.3"></polygon>
            <polygon fill="#3e3e54" points="201.6 273.9 187.5 270.9 187.7 270.2 196 268.7 210.4 271 210.3 271.7 201.6 273.9"></polygon>
            <polygon fill="#3e3e54" points="222.6 278.3 208.1 275.3 208.3 274.5 216.9 273.1 231.8 275.4 231.6 276.2 222.6 278.3"></polygon>
            <polygon fill="#3e3e54" points="362.9 308.1 231.5 280.2 231.7 279.5 240.7 278.1 374.2 305.1 374 305.9 362.9 308.1"></polygon>
            <polygon fill="#3e3e54" points="444.3 288.4 385.2 277.4 385.4 276.5 396.6 274.9 456.9 285.1 456.7 285.9 444.3 288.4"></polygon>
            <polygon fill="#3e3e54" points="526.1 303.6 460.1 291.3 460.3 290.4 472.8 288.9 540.1 300.2 539.9 301.1 526.1 303.6"></polygon>
            <polygon fill="#3e3e54" points="426.2 321.6 376.1 310.9 376.3 310.1 387.4 308.7 438.5 318.5 438.3 319.4 426.2 321.6"></polygon>
            <g>
                <polygon fill="#3e3e54" points="410.6 286.5 399.1 288 398.9 288.8 499.9 308.3 513.3 305.9 513.5 305 410.6 286.5"></polygon>
                <polygon fill="#3e3e54" points="395.7 283.7 395.9 282.8 248.2 255.7 239.2 257.3 239 258 384.3 286 395.7 283.7"></polygon>
            </g>
            <polygon points="371.3 273.9 256.9 252.7 266.4 250.3 382.4 271.5 371.3 273.9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
            <polygon points="237.6 264.9 221.4 261.7 230.4 259.4 246.8 262.6 237.6 264.9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
            <polygon points="474.8 312 250 267.3 259.4 265.1 487.7 309.6 474.8 312" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
            <polygon points="412 308.5 204.4 266 213.1 263.8 423.9 306.3 412 308.5" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
            <polygon points="450.2 316.4 428.8 312 440.9 309.7 462.8 314.1 450.2 316.4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
            <polygon points="201.7 273.1 187.7 270.2 196.2 268 210.4 271 201.7 273.1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
            <polygon points="222.8 277.6 208.3 274.5 217.1 272.4 231.8 275.4 222.8 277.6" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
            <polygon points="363.1 307.3 231.7 279.5 240.9 277.3 374.2 305.1 363.1 307.3" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
            <polygon points="444.6 287.5 385.4 276.5 396.8 274.1 456.9 285 444.6 287.5" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
            <polygon points="526.3 302.7 460.3 290.4 473 288 540.1 300.2 526.3 302.7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
            <polygon points="426.4 320.7 376.3 310.1 387.6 307.9 438.5 318.5 426.4 320.7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
            <g>
                <polygon points="410.7 285.6 399.1 288 500.1 307.4 513.5 305 410.7 285.6" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
                <polygon points="395.9 282.8 248.4 255 239.2 257.3 384.5 285.2 395.9 282.8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" stroke="#000"></polygon>
            </g>
        </g>
        <g id="paw-right">
            <g id="paw-right--down">
                <path d="M293.2,191.3l10-7s-18.4,11.1-24,20-13,20.4-9,31c4.7,12.4,20.5,15.7,22,16,20,3.8,47.8-24.3,47.8-24.3s1.9-3.3,2.2-3.7" fill="#fff"></path>
                <path d="M342.1,223.4c.9,1.2.2,2.8-.3,3.7l-.4.7-.3.3a118.1,118.1,0,0,1-14.2,12.3,83.2,83.2,0,0,1-16.2,9.8,43.9,43.9,0,0,1-9.3,3,26.3,26.3,0,0,1-10.1.2,44.5,44.5,0,0,1-9.3-3.2,34.2,34.2,0,0,1-8.3-5.5,23,23,0,0,1-5.8-8.5,21.3,21.3,0,0,1-1.3-10.3,34.9,34.9,0,0,1,2.7-9.7,76.1,76.1,0,0,1,4.5-8.5l2.4-4,.6-1,.8-1.1a15.6,15.6,0,0,1,1.6-2,49.9,49.9,0,0,1,7-6.8,136.1,136.1,0,0,1,15.3-11.2,3.1,3.1,0,0,1,4.4,1,3,3,0,0,1-.8,4.2H305l-8.6,6.2c-.9.6-2.7-.5-3.1-1.9s.5-4.4,1.5-5l6.6-4.5,3.5,5.3A131.9,131.9,0,0,0,290,197.4a52.7,52.7,0,0,0-6.4,6,6.5,6.5,0,0,0-1.3,1.6l-.6.8-.7,1-2.4,3.8c-1.6,2.6-3.1,5.2-4.4,7.8a27.7,27.7,0,0,0-2.4,8.1,15.6,15.6,0,0,0,.8,8,17.4,17.4,0,0,0,4.4,6.7,27.2,27.2,0,0,0,7.1,4.9,39.5,39.5,0,0,0,8.1,3,21.6,21.6,0,0,0,8.4,0,37.8,37.8,0,0,0,8.5-2.6,84.9,84.9,0,0,0,15.7-9,142.4,142.4,0,0,0,14.1-11.6l-.3.3,1.1-1.8C340.3,223.4,341.3,222.2,342.1,223.4Z"></path>
            </g>
            <g id="paw-right--up">
                <g>
                    <path d="M282.2,215.2c-1.6-1.6-12.8-17.9-14-34.3-.1-2.5,1.7-16,12.9-22.4s22.3-1.9,26.2.4c12.2,7.3,21.2,19.1,22.8,22.4" fill="#fff"></path>
                    <path d="M330,181.2a2.4,2.4,0,0,1-2.6-1.3,71.4,71.4,0,0,0-9.8-10.8,64,64,0,0,0-11.7-8.6,26.3,26.3,0,0,0-6.5-2.3,26.9,26.9,0,0,0-6.9-.6,24.9,24.9,0,0,0-6.7,1.3,20.8,20.8,0,0,0-5.8,3.3,23.1,23.1,0,0,0-7.6,11,32.5,32.5,0,0,0-1.4,6.6,6.6,6.6,0,0,0,.1,1.4l.2,1.8c.1,1.2.4,2.3.6,3.5a65,65,0,0,0,4.8,13.4c1,2.2,2.2,4.3,3.4,6.4a43.1,43.1,0,0,0,3.9,5.9.6.6,0,0,1,0,.6c0,.2-.2.4-.4.7a5.7,5.7,0,0,1-1.5,1.6c-1.3.6-4.1.1-4.6-.6a89.5,89.5,0,0,1-7.2-13.7,63.7,63.7,0,0,1-4.3-14.9,25.7,25.7,0,0,1-.5-4c0-.3-.1-.6-.1-1v-1.2a12.5,12.5,0,0,1,.2-2.1,35.2,35.2,0,0,1,2.4-7.8,28.6,28.6,0,0,1,4.1-6.9,24.6,24.6,0,0,1,6.1-5.5,26.2,26.2,0,0,1,15.5-4.2,28.9,28.9,0,0,1,7.8,1.2l3.8,1.3,1.8.9,1.8,1a78.2,78.2,0,0,1,11.9,9.6,80.2,80.2,0,0,1,9.7,11.8C331.1,179.7,331.4,181,330,181.2Z"></path>
                </g>
                <use height="33.93" transform="translate(273.2 166.1) rotate(-5.6)" width="31.4" xlink:href="#paw-pads"></use>
            </g>
        </g>
        <g id="laptop__terminal">
            <path d="M316.9,238.7,153.5,205.2a5.1,5.1,0,0,1-4-3.5L109.8,75.4c-1-3.3,1.9-6.6,5.6-6.3L277.9,84.5a5.2,5.2,0,0,1,4.6,3.7l40.7,144.4C324.2,236.2,320.8,239.5,316.9,238.7Z"></path>
            <path d="M317.3,238.7a7.9,7.9,0,0,0,2.2-.7,5,5,0,0,0,2.2-1.9,3.7,3.7,0,0,0,.6-2.9l-.3-.8-.2-.9a15.4,15.4,0,0,1-.5-1.7L300,154.6l-10.7-37.5L284,98.3l-2.6-9.4a7.9,7.9,0,0,0-.4-.9,4.3,4.3,0,0,0-.4-.7,3.3,3.3,0,0,0-1.5-1.1l-.9-.3h-1.1l-2.4-.2L119.2,71.2l-2.4-.3h-2.2a3.3,3.3,0,0,0-2.8,1.6,2.4,2.4,0,0,0-.5,1.4v.8c.1.1.1.2.1.4l.2.6,1.5,4.6L119,98.8l11.8,37.3,11.7,37.2,5.9,18.6,2.9,9.3a3.4,3.4,0,0,0,2.2,2h1l1.2.3,2.4.4,153,31.1c4.3.9,7.4,2.9,5.2,3.3s-11.7-.1-16-1l-75.8-15.7L186.6,214l-19-3.9-9.5-2-4.7-1h-.7l-.8-.3a6.1,6.1,0,0,1-1.4-.7,7.6,7.6,0,0,1-2.3-2.4l-.4-.8a1.9,1.9,0,0,1-.2-.7l-.4-1.2-.7-2.3-1.4-4.6-2.9-9.2-5.8-18.5-11.5-36.9-11.5-37-2.9-9.2L109,78.5l-.7-2.3v-.6c0-.3-.1-.6-.1-.8a4.8,4.8,0,0,1,0-1.7,6.8,6.8,0,0,1,3.8-5,10.1,10.1,0,0,1,3-.7h2.6l9.6,1L204.1,76l38.5,3.7,19.3,1.9,9.6.9,4.8.5h2.6a6.6,6.6,0,0,1,2.7,1.2,7.2,7.2,0,0,1,1.9,2.4,12.1,12.1,0,0,1,.5,1.4l.3,1.1,1.3,4.7,2.6,9.3,5.2,18.6,10.4,37.3,10.4,37.3,5.3,18.6,2.6,9.4,1.3,4.6.6,2.4a7,7,0,0,1,.4,2.7,5.7,5.7,0,0,1-1.8,3.7,5.9,5.9,0,0,1-3.4,1.6,3.5,3.5,0,0,1-2.1-.4C316.7,239,316.8,238.9,317.3,238.7Z"></path>
        </g>
        <g id="laptop__terminal_code_scene">
            <g id="laptop__code">
                <g stroke-width="6" stroke="#3DE0E8" transform="matrix(-1 0 0 1 278 103)">
                    <g id="f3" transform="translate(0 76)">
                        <path class="typing-animation" d="M8,25L8,25" id="f3-l9" stroke-dasharray="60,10"></path>
                        <path class="typing-animation" d="M8,13L8,13" id="f3-l8" stroke-dasharray="50,10"></path>
                        <path class="typing-animation" d="M0,1L0,1" id="f3-l7" stroke-dasharray="25,10"></path>
                    </g>
                    <g id="f2" transform="translate(0 38)">
                        <path class="typing-animation" d="M8,25L8,25" id="f2-l6" stroke-dasharray="40,10"></path>
                        <path class="typing-animation" d="M8,13L8,13" id="f2-l5" stroke-dasharray="60,10"></path>
                        <path class="typing-animation" d="M0,1L0,1" id="f2-l4" stroke-dasharray="30,10"></path>
                    </g>
                    <g id="f1">
                        <path class="typing-animation" d="M8,25L8,25" id="f1-l3" stroke-dasharray="60,10"></path>
                        <path class="typing-animation" d="M8,13L8,13" id="f1-l2" stroke-dasharray="60,10"></path>
                        <path class="typing-animation" d="M0,1L0,1" id="f1-l1" stroke-dasharray="60,10"></path>
                    </g>
                </g>
            </g>
        </g>
        <g id="laptop__cover" style="mix-blend-mode: hard-light;">
            <polygon fill="#f2f2f2" points="440.7 347.2 90.3 275.6 4.7 3.8 353 36.7 440.7 347.2"></polygon>
            <path d="M440.4,346.4c-2.5-5.3-6.5-18.8-9-27.4L390.7,178c-13.6-46.8-26.9-93.7-40.3-140.6l2.3,2L4.4,7.1,7.9,2.8,94,274.5l-2.9-2.6q83.7,16.8,166.8,34.2t166.8,35.4c8.8,1.9,17.5,5.1,14.7,5.5s-6.3-.2-12-.9-12.3-1.5-16.8-2.3Q330.5,328.1,250,312.1c-53.5-10.8-107.1-21.7-160.4-32.7l-2.3-.5-.6-2.1L1.5,4.8,0,0,5,.5,353.3,34l1.8.2.5,1.8q20.7,73.8,41.2,147.8l40.6,147.5C439.8,340.1,442.9,351.7,440.4,346.4Z"></path>
        </g>
    </g>
    <g id="paw-left">
        <g id="paw-left--up">
            <g>
                <path d="M545.4,261.9c-7.1-13-12.9-31.1-13.3-37.6-.6-9,0-15.6,5.2-22.2s15-9.8,22.7-8.8a26.7,26.7,0,0,1,17.3,9.4c5.3,5.8,9.4,12.9,11.6,16.6" fill="#fff"></path>
                <path d="M588.9,219.2c-1.4.4-2.3-.7-2.8-1.4a93.9,93.9,0,0,0-8.9-12.5c-3.3-3.9-7.1-7-11.7-8.6a24.2,24.2,0,0,0-7.1-1.4,24.5,24.5,0,0,0-7.1.7,27,27,0,0,0-6.6,2.7,21,21,0,0,0-5.2,4.6,20.6,20.6,0,0,0-3.5,6.1,22.2,22.2,0,0,0-1.3,6.9,47.3,47.3,0,0,0,.1,7.5,52.2,52.2,0,0,0,1.4,7.1c1.4,4.8,3.1,9.7,5,14.4a147.7,147.7,0,0,0,6.5,13.9c.4.7-1,2.3-2.4,2.6s-4-.6-4.4-1.4c-2.3-4.8-4.3-9.7-6.1-14.6a128.8,128.8,0,0,1-4.6-15.3c-.3-1.3-.5-2.6-.7-4a16.4,16.4,0,0,1-.2-2.2v-2a57,57,0,0,1,.4-8.2,27.2,27.2,0,0,1,2.3-8.2c.7-1.3,1.4-2.5,2.2-3.7l1.3-1.7,1.4-1.6a28.8,28.8,0,0,1,7-5,27.6,27.6,0,0,1,8-2.5,25.6,25.6,0,0,1,8.3-.2,27.4,27.4,0,0,1,15.1,6.7,50.6,50.6,0,0,1,5.5,5.9,111.3,111.3,0,0,1,8.7,13.2C589.8,217.7,590.3,218.9,588.9,219.2Z"></path>
            </g>
            <use height="33.93" transform="matrix(0.99, -0.03, 0.04, 1, 539.85, 203.52)" width="31.4" xlink:href="#paw-pads"></use>
        </g>
        <g id="paw-left--down">
            <path d="M538.2,239.3c-3.2,1.6-33,10.8-37,28-.4,1.8-2.1,18.9,7,26,5.5,4.3,12.7,2.8,25,0,10.3-2.3,19-5.8,40-16,9.1-4.4,16.6-8.2,22-11" fill="#fff"></path>
            <path d="M595.1,266.4c.1,1.4-1.4,2.4-2.4,2.9l-18.3,9.4c-6.2,3.1-12.3,6.1-18.6,9a120.8,120.8,0,0,1-19.6,7.2l-5.1,1.2-5.1,1.1a43.4,43.4,0,0,1-5.2.9,33.8,33.8,0,0,1-5.6.3,17.8,17.8,0,0,1-5.8-1.5,6.1,6.1,0,0,1-1.4-.7l-1.3-.9-2.2-2a23.6,23.6,0,0,1-5.2-10.2,44.5,44.5,0,0,1-1.3-10.9c0-.9.1-1.8.1-2.7a6.6,6.6,0,0,0,.1-1.4v-.7c.1-.3.1-.7.2-.9a21.6,21.6,0,0,1,2.1-5.5,33.4,33.4,0,0,1,7.1-8.7,67.1,67.1,0,0,1,8.7-6.4,121.7,121.7,0,0,1,19-9,1.5,1.5,0,0,1,1.7.6,3.4,3.4,0,0,1,.9,1.9c.1,1.5-1.6,4.2-2.6,4.6a91.1,91.1,0,0,0-17.8,8.5,40.1,40.1,0,0,0-7.6,5.8,22.8,22.8,0,0,0-5.2,7.3l-.4,1-.3,1a1.7,1.7,0,0,0-.2.5v.4c-.1.4-.1.8-.2,1.2s-.1,3.1-.1,4.7a35.4,35.4,0,0,0,1.4,9.3,15.6,15.6,0,0,0,4.5,7.3c2,1.9,4.7,2.6,7.8,2.5a55.9,55.9,0,0,0,9.7-1.2l4.9-1.1,4.9-1.1a121,121,0,0,0,18.8-6.8c12.4-5.3,24.6-11.5,36.8-17.4C593.4,265.4,595,264.9,595.1,266.4Z"></path>
        </g>
    </g>
</svg>
<style>
#bongo-cat {
    width: 100%;
    max-width: 600px;
    margin: 60px auto 0 auto;
    display: block;
}
.typing-animation {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 1200ms;
}
path#f1-l1 {
    animation-name: typing-f1-l1;
}

path#f1-l2 {
    animation-name: typing-f1-l2;
}

path#f1-l3 {
    animation-name: typing-f1-l3;
}

path#f2-l4 {
    animation-name: typing-f2-l4;
}

path#f2-l5 {
    animation-name: typing-f2-l5;
}

path#f2-l6 {
    animation-name: typing-f2-l6;
}

path#f3-l7 {
    animation-name: typing-f3-l7;
}

path#f3-l8 {
    animation-name: typing-f3-l8;
}

path#f3-l9 {
    animation-name: typing-f3-l9;
}
@keyframes typing-f3-l9 {
    0% {
        d: path("M8,25L8,25");
    }
    82% {
        d: path("M8,25L8,25");
    }
    92% {
        d: path("M8,25L96,25");
    }
    100% {
        d: path("M8,25L96,25");
    }
}
@keyframes typing-f3-l8 {
    0% {
        d: path("M8,13L8,13");
    }
    68% {
        d: path("M8,13L8,13");
    }
    82% {
        d: path("M8,13L146,13");
    }
    100% {
        d: path("M8,13L146,13");
    }
}
@keyframes typing-f3-l7 {
    0% {
        d: path("M0,1L0,1");
    }
    60% {
        d: path("M0,1L0,1");
    }
    68% {
        d: path("M0,1L96,1");
    }
    100% {
        d: path("M0,1L96,1");
    }
}
@keyframes typing-f2-l6 {
    0% {
        d: path("M8,25L8,25");
    }
    54% {
        d: path("M8,25L8,25");
    }
    60% {
        d: path("M8,25L69,25");
    }
    100% {
        d: path("M8,25L69,25");
    }
}
@keyframes typing-f2-l5 {
    0% {
        d: path("M8,13L8,13");
    }
    44% {
        d: path("M8,13L8,13");
    }
    54% {
        d: path("M8,13L114,13");
    }
    100% {
        d: path("M8,13L114,13");
    }
}
@keyframes typing-f2-l4 {
    0% {
        d: path("M0,1L0,1");
    }
    30% {
        d: path("M0,1L0,1");
    }
    44% {
        d: path("M0,1L136,1");
    }
    100% {
        d: path("M0,1L136,1");
    }
}
@keyframes typing-f1-l3 {
    0% {
        d: path("M8,25L8,25");
    }
    24% {
        d: path("M8,25L8,25");
    }
    30% {
        d: path("M8,25L61,25");
    }
    100% {
        d: path("M8,25L61,25");
    }
}
@keyframes typing-f1-l2 {
    0% {
        d: path("M8,13L8,13");
    }
    14% {
        d: path("M8,13L8,13");
    }
    24% {
        d: path("M8,13L124,13");
    }
    100% {
        d: path("M8,13L124,13");
    }
}
@keyframes typing-f1-l1 {
    0% {
        d: path("M0,1L0,1");
    }
    14% {
        d: path("M0,1L160,1");
    }
    100% {
        d: path("M0,1L160,1");
    }
}
#paw-right--up,
#paw-right--down,
#paw-left--up,
#paw-left--down {
    animation: blink 300ms infinite;
}
#paw-right--up,
#paw-left--down {
    animation-delay: 150ms;
}
@keyframes blink {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
#laptop__code {
    transform: rotateX(-37deg) rotateY(-46deg) rotateZ(-23deg) translateX(8px) translateY(20px) translateZ(-50px);
    width: 100px;
}
</style>

Если появилось желание поселить такого питомца в блоге, копируйте код понравившегося варианта и устанавливайте на странице в формате HTML или в гаджет  HTML/JavaScript.

Вот такой котопост получился сегодня. Все они родом с codepen.
И ещё один котик в этой статье.

МЯУ...
Всем, привет. Предлагаю вашему вниманию ещё один вариант индикатора прокрутки страницы. В отличии от других, ранее опубликованных вариантах и стилей полосы прокрутки, здесь будет отображаться и процентное отношение, и сама цветная полоска уже не в верху, а в самом низу страницы. Вы наглядно посмотреть можете прямо здесь. Прокрутите страницу до конца. 

индикатор прокрутки


Вот такой оригинальный скроллинг страницы.

Это сам код. Расписывать в подробностях не буду. Разберём ниже, как его оформить под персональный дизайн.

<div id="scroll-percentage">
    <div class="percentage"></div>
</div>
<div id="percentage-value"></div>
<script type="text/javascript">const updateScrollPercentage = function() {
    const heightOfWindow = window.innerHeight,
    contentScrolled = window.pageYOffset,
    bodyHeight = document.body.offsetHeight,
    percentage = document.querySelector(".percentage"),
    percentageVal = document.querySelector("#percentage-value")
    if(bodyHeight - contentScrolled <= heightOfWindow) {
        percentageVal.textContent = percentage.style.width = "100%"
    }
    else {
        const total = bodyHeight - heightOfWindow,
        got = contentScrolled,
        percent = parseInt((got/total) * 100)
        percentageVal.textContent = percentage.style.width = percent + "%"
    }
}
window.addEventListener('scroll', updateScrollPercentage)</script>

<style>#scroll-percentage {
    position: fixed;
    bottom: 0;
    left: 0x;
    width: 100vw;
    color: #000;
    margin: 0;
    padding: 0;
    z-index: 1000;
}
#scroll-percentage .percentage {
    display: inline-block;
    background-color: #004D40; /* цвет нижней полосы */
    border-bottom: 5px solid #F4FF81;  /*цвет рамки полосы */
    height: 4px;  /* ширина полосы */
    width: 0;
    box-sizing: content-box; 
}
#percentage-value {
    box-sizing: content-box;
    position: fixed;
    bottom: 20px;
    left: 20px;
    height: 80px;  /*размер круга можно уменьшить/увеличить */
    width: 80px; /*размер круга можно уменьшить/увеличить */
    color: #FFFFFF; /*цвет цифр  */
    background-color: #004D40; /*фон круга */
    text-align: center;
    line-height: 80px; /*регулировать при изменении размера круга */
    border-radius: 50%;
    border: 5px solid #F4FF81; /*цет рамки круга */
    font-size: 24px; /*размер шрифта цифр */
    font-weight: bold;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); /*размер и цвет тени круга */
} </style>


Настройте под ваш дизайн цветовую гамму индикатора прокрутки. Сам код можно установить, на отдельную страницу, в самом конце сообщения, перейдя в формат HTML, так и в гаджет HTML/JavaScript, тоже лучше в конце макета блога.

Вот и всё. Всем добра и до встречи.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


Пользовательский поиск