Симпатичные анимированные SVG-иконки. Пригодятся, например, для теста, чтобы показать, правильный ответ или нет 🙂

Анимация в самом SVG

See the Pen svg-icons-animation by FurryCat (@mohnatus-the-lessful) on CodePen.

Анимация через CSS

Анимация сработает при клике на блок:

Весь фокус — в манипуляции свойством stroke-dashoffset, которое определяет отступ от начала строки до ее заполнения. По сути мы просто рисуем пунктирную линию с шагом в 100 пикселей (свойство stroke-dasharray), и первая черточка на ней начинается через 100 пикселей от начала.

0 комментариев

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

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован