Симпатичные анимированные SVG-иконки. Пригодятся, например, для теста, чтобы показать, правильный ответ или нет 🙂
Анимация в самом SVG
See the Pen svg-icons-animation by FurryCat (@mohnatus-the-lessful) on CodePen.
Анимация через CSS
Анимация сработает при клике на блок:
See the Pen svg-icon-click-animation by FurryCat (@mohnatus-the-lessful) on CodePen.
Весь фокус — в манипуляции свойством stroke-dashoffset, которое определяет отступ от начала строки до ее заполнения. По сути мы просто рисуем пунктирную линию с шагом в 100 пикселей (свойство stroke-dasharray), и первая черточка на ней начинается через 100 пикселей от начала.
0 комментариев