Данный Q-A является продолжением прошлого(стилизация текста
SVG
).
В этом Q-A(Question-Answer) мы рассмотрим Crack effect
, ниже будут приведены примеры этого эффекта, всего их будет 3 штуки.
Первый пример (появление трещины вдоль текста с дальнейшей трансформацией):
Второй пример (верхняя часть текста отламывается и плавно съезжает после взмаха мечом, при том, что сам текст должен находится под наклоном примерно в 1-2deg
):
Третий пример (похож на второй, но есть своё отличие, происходит два взмаха вдоль и поперёк текста):
Текст будет реализован на SVG
, его размещение через clipPath
, а анимация с помощью @keyframes
.
P.S. Все примеры срабатывают после клика.
Codepen
— codepen.io/St1myL/pen/KoXrRG – Arthur 1 апр '18 в 19:03