Эффект масштабирования ⇐ CSS
-
Гость
Эффект масштабирования
Я работаю над личным сайтом и сделал этот простой эффект слева и справа. Но когда я помещаю мышь на правую сторону и возвращаюсь на левую сторону, происходит это движение, и я не знаю, как это исправить. Это не проблема, но это слишком некрасиво, и я хочу сделать этот эффект плавным
Гифка с этим фильмом
Не знаю, можно ли это увидеть на гифке
Вот мой CSS-код
.Container { дисплей: гибкий; гибкий: 1; гибкое направление: строка; положение: относительное; оправдание-содержание: центр; } .ВыборКонтейнера { ширина: 50%; высота: 100вх; выравнивание текста: по центру; размер шрифта: 300%; переход: преобразование 0,2 с; } .Текст { маржа-верх: 70vh; } .Заголовок { позиция: абсолютная; цвет фона: прозрачный; размер шрифта: 600%; маржа-верх: 15vh; режим смешивания: разница; цвет: aliceblue; z-индекс: 99; } .ChoseContainer:hover { преобразование: масштаб (1.1); } Объект класса — это CoseContainer и его внутренняя часть Container.
Ожидается, что этот эффект будет плавным и без мерцания
Я работаю над личным сайтом и сделал этот простой эффект слева и справа. Но когда я помещаю мышь на правую сторону и возвращаюсь на левую сторону, происходит это движение, и я не знаю, как это исправить. Это не проблема, но это слишком некрасиво, и я хочу сделать этот эффект плавным
Гифка с этим фильмом
Не знаю, можно ли это увидеть на гифке
Вот мой CSS-код
.Container { дисплей: гибкий; гибкий: 1; гибкое направление: строка; положение: относительное; оправдание-содержание: центр; } .ВыборКонтейнера { ширина: 50%; высота: 100вх; выравнивание текста: по центру; размер шрифта: 300%; переход: преобразование 0,2 с; } .Текст { маржа-верх: 70vh; } .Заголовок { позиция: абсолютная; цвет фона: прозрачный; размер шрифта: 600%; маржа-верх: 15vh; режим смешивания: разница; цвет: aliceblue; z-индекс: 99; } .ChoseContainer:hover { преобразование: масштаб (1.1); } Объект класса — это CoseContainer и его внутренняя часть Container.
Ожидается, что этот эффект будет плавным и без мерцания
Мобильная версия