• 2352
  • 0
  • Автор: Pete R
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Сегодня покажу как сделать заменить " loading" картинку на CSS . Идея состоит в том, чтобы управлять объектами HTML, используя только CSS , таким образом, мы можем избавится от GIF.

Отказ от ответственности: Цель этой статьи состоит в том, чтобы показать Вам возможности CSS. Содержание может не быть практичным, чтобы использовать в действительности. Демонстрационный пример работает лучше всего в Хроме, и частично работает в Firefox и Сафари.

ПРЕИМУЩЕСТВА ИСПОЛЬЗОВАНИЯ ANIMATION CSS перед GIF/JS
Это дало мне больше контроля над анимацией. Я нашел, что намного более удобнее отредактировать элементы и скорость анимации через CSS вместо того, чтобы по мучатся с Фотошопом.
Анимация CSS использует ускорение GPU, которое намного быстрее, чем применение JS и намного легче с точки зрения размера, когда сравниваются с gif изображениями.
CSS позволяет пользователям быть в состоянии взаимодействовать с анимацией. Для gif изображений нет никакого взаимодействия между пользователями и анимацией.
С ДРУГОЙ СТОРОНЫ, ТАКЖЕ ЕСТЬ НЕКОТОРЫЕ НЕДОСТАТКИ
Анимация CSS еще широко не поддерживается. Например, в нашем демонстрационном примере, некоторые аннимации не работают в Сафари, но работают хорошо в Хроме.
Чтобы улучшить работу, я решил свести код HTML к минимуму, чтобы ускорить начальную загрузку страницы. Реализовал при помощи псевдо элементов :before и :after. CSS позволяет мне легко создавать 3 анимированных элемента, используя один HTML-тэг. Вы можете легко отредактировать любые изменения, просто регулируя числа в файле CSS.
В демо 5 различных АЯКСА CSS, анимации, чтобы показать Вам,на что способна анимация CSS . Не стесняйтесь экспериментировать на них так, как Вы хотите.
Я надеюсь, что Вы понравились мой небольшой эксперимент и если у Вас есть идеи, чтобы показать нам, не стесняйтесь показывать их в комментариях ниже.

1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем в папку с шаблоном.
2.в хеад подключаем стили и .

Код:
<link rel="stylesheet" type="text/css" href="css/style.css" />
3.В main.tpl заменяем
Код:
<div id="loading-layer"><img src="{{ tpl_url }}/images/loading.gif" alt="" /></div>
на
Код:
<div id="loading-layer"><div class="loader1">
<i></i><i></i>
</div></div>
где "loader1" изменить на свой выбор 2,3,4,5. Конечно можно сделать и грамотнее,просто прописав стили лоадера в стиле "loading-layer"

Можешь почитать и вот эту статейку "Скрипты добавления ссылки на источник при копировании текста "

mistakes

Это тоже интересно

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

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element