Как я могу создать эту анимацию CSS/SVG для веб-сайта?

-5

Мне было поручено сделать некоторые вещи UX для нового сайта (используя Vue.js и SASS w/Bourbon), очень похоже на то, что https://stripe.com/connect делает здесь:

enter image description here

Итак, вопрос в том, как это делается? Какие технологии мне нужно использовать? Это просто SVG и CSS? Если да, то каким образом SVG управляется и какой SVG мне нужен разработчик, и какие свойства CSS мне нужно использовать для управления этими элементами?

Отдельным (но связанным) вопросом было бы, как я могу достичь текучести и производительности, которые у них есть здесь? Он настолько шелковистый, чтобы взаимодействовать!

спросил(а) 2018-06-08T19:59:00+03:00 1 год, 6 месяцев назад
1
1 ответ
54

То, как я это делал, - создать SVG файл с любыми воображаемыми, секциями, значками и т.д., Вам понадобится, даже если они будут перекрываться, и установите для них непрозрачность нуля, так что вы останетесь с по умолчанию версию того, что пользователи увидели в первую очередь.

Убедитесь, что вы правильно назвали все элементы SVG и что легко запомнить и сгруппировать в зависимости от того, как они будут анимированы. Группируйте все, что будет анимировано вместе.

Установите элементы, которые будут анимированы, чтобы иметь непрозрачность нуля.

Скопируйте SVG-код и вставьте его непосредственно в файл HTML. С помощью CSS укажите каждый идентификатор и дайте им необходимую анимацию.

Это просто пример:

.first svg {
#Tool {
visibility: hidden;
}
#Tool-ON {
@include transition(ease-in 0.5s);
opacity: 1;
}
}

Если в элементе HTML есть .first класс, SVG изменится в соответствии со свойствами класса. Довольно просто, но с этой базовой идеей вы можете иметь довольно крутую анимацию изображения в зависимости от ввода пользователем.

ответил(а) 2018-06-13T07:12:00+03:00 1 год, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема