• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Гуляющий кот на CSS без JQuery анимации (Оригинальный эффект гуляющей кошки, который создан на css)
Гуляющий кот на CSS без JQuery анимации
Kosten
Дата: Понедельник, 2019-10-07, 17:53 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25011
Награды: 57


Оригинальный эффект гуляющей кошки, где при открытие мы сразу видим черного по цвету кота, который прогуливается по вашей страницы. Безусловно создано больше для привлечение, но главное, что все создано на чистом CSS. Ниже можно добавить описание, где есть есть собственный фирменный цвет, вы можете использовать его здесь, чтобы четко обозначить свой веб-сайт. В зависимости от используемых шрифтов вы можете изменять текстовые эффекты.



HTML

Код
<div class="tuna"></div>

<p>ZorNet.Ru — сайт для вебмастера</p>

CSS

Код
.tuna {
  animation: walk-cycle 1s steps(12) infinite;
  background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0 no-repeat;
  height: 200px;
  width: 400px;
  margin: 100px auto 0;
}

@keyframes walk-cycle {  
  0% {background-position: 0 0; }
  100% {background-position: 0 -2391px; }
}

p {text-align: center;}



See the Pen
Catwalk(cycle)
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 6403376.png(12.9 Kb) · 4798363.png(291.7 Kb)
Страна: (RU)
-SAM-
Дата: Вторник, 2019-10-08, 06:28 | Сообщение 2
Оффлайн
Друзья сайта
Сообщений:592
Награды: 25


Очень интересный стиль. Но тут не ясно для чего такое подключать, если честно. Разве, что есть такой вот эффект, что на стилях можно реализовать. Загружается картинка со спрайтами, это отдельные фреймы... их можно спокойно упаковать в один GIF-файл или APNG (даже если нет графического редактора, то таких хватает сервисов, что предоставляют такие возможности онлайн, к примеру, сервис ezgif). Но тут, как понимаю, что можно менять скорость воспроизведения прямо через стиль, что в случае с графическим файлом - не выйдет, придётся делать новый файл. Думаю, что использование графического содержимого там будет даже меньше по весу на выходе, нежели использовать такой метод (в анимированной графике используется сжатие с потерями или без потерь даже оптимизация, а через стиль - этот стиль всё равно будет отдельно идти от графического файла со спрайтом). UPD.: а может, что и нет... ведь, если таких картинок с анимацией нужно несколько, то вес будет больше - дублируются фреймы, когда меняется та же скорость воспроизведения, наверное... и если посмотреть тот файл со спрайтами, так в нём еще несколько анимаций идёт, что кот садится, меняет скорость бега и вприпрыжку бежит... если отдельными файлами делать, то размер будет больше, нежели взять один оптимизированный спрайт, по цветовой палитре и прочему, и написать отдельные стили к нему... такие вот дела.



Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи и ответы на ваши вопросы по системе uCoz.


Сообщение отредактировал
-SAM- - Среда, 2019-10-09, 01:45
Страна: (UA)
Kosten
Дата: Вторник, 2019-10-08, 12:45 | Сообщение 3
Оффлайн
Администраторы
Сообщений:25011
Награды: 57


Цитата -SAM- ()
Очень интересный стиль

Не то слово! 11a
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Гуляющий кот на CSS без JQuery анимации (Оригинальный эффект гуляющей кошки, который создан на css)
  • Страница 1 из 1
  • 1
Поиск: