Самый милый след от курсора в виде отпечатка кошачьих лапок на снегу с использованием HTML5 Canvas
Очень милый скрипт, который создаёт за курсором след из отпечатков кошачьих лапок! Если использовать на белом фоне, то создаётся впечатление, что эти отпечатки оставлены на снегу
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.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 поместите:
|
1 |
<script type="text/javascript" src="/js/kitty_cursor.js"></script> |
Осталось лишь залить JS файл из прикреплённого архива в папку js и SVG картинку в папку img
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
прикольно
Какие милые лапки :зззззз