Приложение обувной фабрики имеет такой эффект, и мой маленький друг как раз хотел сделать такой эффект, поэтому он начал учиться, как это сделать, Эмммм, все знают, что мой навык вклеивания дизайнерских рисунков равен 0, поэтому я изучил это осторожно один раз. :
макет первыйflexможет быть достигнуто, и анимация может быть выполнена с помощьюtransformилиanimationвыполнить.
Первая реакция на такой макетjustify-content: space-between, После написания волны такого эффекта добиться можно, а вот как позиционировать анимацию - большая проблема.
Здесь наша первая реакция — использоватьvwэтот блок,1vwозначает 1% ширины области просмотра. Самый простой анимационный эффект заключается в использованииtransitionДля этого свойство changetransform, то слово Токио должно располагаться в100vw - ${x}px - ${width}позиция. Предполагая, что пустое пространство с обеих сторон составляет 10 пикселей, мы можем получить позиции Шанхая и Токио, не прибегая кspace-between.
Но дело в том, что если вы используетеtransform: translateX(), то Шанхай займет позицию, даже если он будет смещен.Если мы реализуем это с помощью чистого CSS, то не получится очень хорошо позиционировать слово Токио.
поэтому мы возвращаемся кflex: space-between, то для Токио по умолчанию используется значение -10 пикселей (10 пикселей вправо), для Шанхая — 10 пикселей (10 пикселей влево), а для Токио — значение-100vw + ${x}px + ${width}, а Шанхай находится в100vw - ${x}px - ${width}.
Что касается средней кнопки, которая не требует движения, просто оставайтесь посередине.
Для конкретных эффектов см.:JS fiddle.net/CSV волк/4 яблока…
- Использованная литература:Семь модулей CSS, о которых вы могли не знать