Как с помощью HTML/CSS перейти от одного изображения к другому с помощью анимированной маски?Html

Программисты Html
Ответить
Anonymous
 Как с помощью HTML/CSS перейти от одного изображения к другому с помощью анимированной маски?

Сообщение Anonymous »

У меня есть два изображения на HTML-странице. Один черно-белый, другой цветной. Я хотел бы перейти от черно-белого изображения к цветному, используя собственную анимацию. Эффект, который я ищу, заключается в том, что изображение выглядит черно-белым, а затем кажется, что оно «окрашено» в цвет, штрих за штрихом.

Самый простой способ, который я могу придумать, — это создать анимированный gif, который начинается с белого цвета и окрашивается в черный цвет, штрих за штрихом. Затем я мог бы поместить цветное изображение поверх черно-белого изображения, используя абсолютное позиционирование, и замаскировать цветное изображение анимированным gif.

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

Или есть ли лучший способ добиться такого эффекта?
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»