Разлетающиеся частицы при нажатии на кнопку

Скрипт, реализующий данные эффекты не требует дополнительные библиотеки и занимает менее 100 строк кода.

HTML:

HTML-код кнопок, написан ниже, рядом с примерами.

CSS:

CSS для всех примеров одинаковый

JS:

JS для всех примеров одинаковый

Примеры:

Оформление самих кнопок в вышестоящих кодах нет, они взяты из темы: Оформление кнопок на CSS

Разлетающиеся квадраты:

Пример:

HTML:

<button data-type="square">Кнопка</button>

JS:

За квадраты отвечают строки:

  • 33 - цвет фона квадртатов
  • 34 - цвет бордюра квадртатов

Разлетающиеся символы:

Пример:

HTML:

<button data-type="symbol">Кнопка</button>

JS:

За символы отвечают строки:

  • 37 - сами символы
  • 38 - их цвет
  • 39 - их размер

Разлетающиеся картинки:

Пример:

HTML:

<button data-type="logo">Кнопка</button>

JS:

Ссылка на картинку дана в строке 43

Разлетающиеся точки с тенью:

Пример:

HTML:

<button data-type="shadow">Кнопка</button>

JS:

За точки отвечают строки:

  • 46 - задает их цвет
  • 50 - их размер

Разлетающиеся линии:

Пример:

HTML:

<button data-type="line">Кнопка</button>

JS:

Строка 53 задает цвет линий, а 54 их ширину


За основу взят скрипт, найденный на codepen.io у пользователя Louis Hoebregts

Смотрите также:

Логотипы на CSS

Несколько примеров оформления логотипов или заголовков для сайта на CSS

Добавить комментарий:

Ваш комментарий отправлен!