Я быстро хотел поделиться тем, как вы можете анимировать SVG, чтобы сделать целевую страницу более визуально приятной. Или визуально приятно что-нибудь действительно! Я имею в виду, да ладно, это выглядит чертовски круто!
Кроме того, мне нужно быстро упомянуть, откуда я лично узнал об этом, и вместо того, чтобы читать этот блог, вы можете сразу перейти к видео. Большое спасибо Курсу Дизайна на YouTube!
Давайте начнем!
Каждый раз, когда вы создаете SVG в иллюстраторе или любом другом используемом вами программном обеспечении и добавляете его в свой проект, html-код SVG выглядит примерно так:
<svg xmlns="http://www.w3.org/2000/svg"> <g> <path d="blah blah blah"/> <path d="blah blah blah"/> </g> </svg>
Круто то, что на эти теги <g></g>
и <path />
можно нацеливаться и делать с ними все, что угодно!
Теперь важно, чтобы вы нацеливались на конкретный путь SVG, с которым вы хотите что-то делать. Чтобы быстро увидеть, какие пути есть какие, вы можете открыть инструменты разработчика в браузере, найти свой элемент SVG, развернуть его и просто просмотреть разные <path />
или <g></g>
, чтобы увидеть, какие из них вы хотите настроить.
В моем случае:
Теперь, если у вас есть несколько <path />
, которые составляют один объект, который вы хотите анимировать, оберните их тегом group <g></g>
, и теперь эта группа — это то, к чему вы примените имя своего класса и на что будете ориентироваться с помощью CSS.
Теперь в моем случае я буду ориентироваться на две карты и применил к ним имя класса card
.
Вот CSS для анимации карточек:
.card { animation-name: animateCard; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes animateCard { from { transform: translateX(0) translateY(0); } to { transform: translateX(20px) translateY(-20px); } }
И бац! Я получил себе крутую анимацию!
Теперь, пожалуйста, не забудьте проверить канал YouTube, о котором я упоминал выше, он расскажет, как создать 3D-эффект на SVG и все такое!
Спасибо за чтение и хорошего чтения!