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

Question

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

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

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

Answer 1

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

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

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

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

Это всего лишь пример:

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

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