Самый милый след от курсора в виде отпечатка кошачьих лапок на снегу с использованием HTML5 Canvas

Разместил: Apocalypse
Опубликовано: 7 января 2019

Очень милый скрипт, который создаёт за курсором след из отпечатков кошачьих лапок! Если использовать на белом фоне, то создаётся впечатление, что эти отпечатки оставлены на снегу

Для начала посмотрите ДЕМО

Установка:

1#: В самый низ вашего CSS вставьте:

.print {
animation-duration: 8s;
animation-name: blurout;
animation-fill-mode: forwards;
height: 40px;
left: 0px;
position: fixed;
top: 0px;
width: 40px;
}
.print::before {
animation-duration: .5s;
animation-name: fadein;
background: url(/img/paw4.svg) no-repeat;
background-size: contain;
content: '';
display: block;
height: 40px;
width: 40px;
}

@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes blurout {
from {
filter: blur(0px);
}
to {
filter: blur(5px);
}
}

.print {

animation-duration: 8s;

animation-name: blurout;

animation-fill-mode: forwards;

height: 40px;

left: 0px;

position: fixed;

top: 0px;

width: 40px;

}

.print::before {

animation-duration: .5s;

animation-name: fadein;

background: url(/img/paw4.svg) no-repeat;

background-size: contain;

content: '';

display: block;

height: 40px;

width: 40px;

}

@keyframes fadein {

from {

opacity: 0;

}

to {

opacity: 1;

}

@keyframes blurout {

from {

filter: blur(0px);

}

to {

filter: blur(5px);

}

2#: Следующий код на странице, где хотите видеть такой эффект, сразу после тега body поместите:

<script type="text/javascript" src="/js/kitty_cursor.js"></script>

1	<script type="text/javascript" src="/js/kitty_cursor.js"></script>

Осталось лишь залить JS файл из прикреплённого архива в папку js и SVG картинку в папку img

Автор публикации

не в сети 2 месяца

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1096Регистрация: 27-08-2018

Метки: Canvas Cursor HTML5 Kitty SVG Зима Кот Курсор Лапки След След от курсора Снег

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

2 Комментарий

Старые

Межтекстовые Отзывы

Посмотреть все комментарии

Участник

Жека Знахарев

6 лет назад

прикольно

Ответить

Участник

XemorDio

6 лет назад

Какие милые лапки :зззззз

Ответить

Всевидящее око

Новый комментарий от пользователя Эдуард: «Забыл добавить. Снег появляется то в футере (когда ставил перед закрывающим тегом body), то наоборот почему-то в самом верху (причем сам блог сдвигался вниз), когда ставил его после открывающего тега, как было указано в статье.» в материале Приятный Новогодний снежок на HTML5 Canvas

2024-12-29 16:26:03

VVL99

Всех с новым годом!

2025-01-02 17:46:18

Всевидящее око

Новый комментарий от пользователя Acıbadem su kaçak tespiti: «Acıbadem su kaçak tespiti Kadıköy su kaçağı tespiti: Kadıköy’deki su sızıntılarında noktasal tespit için yanınızdayız. https://www.grand-indonesia.com/author/kacak/» в материале Фон из анимированных самолётов на CSS3

2025-01-02 18:25:49

Всевидящее око

Новый комментарий от пользователя elavil for anxiety reviews: «elavil for anxiety reviews

elavil for anxiety reviews» в материале Крутой анимированный индикатор загрузки в виде снежка на CSS3

2025-01-03 19:51:39

Всевидящее око

Новый комментарий от пользователя how long can you take elavil: «how long can you take elavil

how long can you take elavil» в материале След за курсором из частиц на HTML5 Canvas

2025-01-05 15:00:13

stalker1313

Привет. Может кто-нибудь знает почему не получается зайти на сайт playstation через vpn и как это исправить? Без vpn захожу на сайт, но не могу зарегать акк.
Ошибка:
Страница недоступна
Сайт playstation.com не отправил данных.
ERR_EMPTY_RESPONSE

2025-01-08 18:00:15

Al-Sher

@stalker1313, Привет. Возможно впн блочит их сайт. Попробовал со своим личным впном - сайт открывается

2025-01-08 19:56:24

stalker1313

@Al-Sher, бесплатный, хороший vpn посоветуете?

2025-01-08 22:01:35

stalker1313

Можно как-то сохранить все статьи с сайта wp в отдельные вордовские документы?

2025-01-09 19:50:03

Al-Sher

@stalker1313, Увы, я уже давно пользуюсь только личным впн на своей впске)

2025-01-10 20:41:42

......

Для публикации сообщений в чате необходимо авторизоваться