Я создаю анимированный логотип для своего веб-сайта. Это простая 2-кадровая гифка. Единственная разница между двумя кадрами заключается в том, что в первом есть светящийся объект, а во втором нет.
Вот первый кадр .
Теперь, нажав «Сохранить для Интернета», я решил не использовать матовый цвет, потому что цвет фона, который я использую на веб-сайте, — это градиент. И это создает эту уродливую вещь .
Как я уже говорил, я не могу просто использовать матовый цвет, потому что цвет фона моего веб-сайта — градиент серого и черного.
Могу ли я что-нибудь сделать? Мне нужно, чтобы этот логотип был чистым, без линий, и он должен соответствовать градиенту на моем веб-сайте.
.gif
не поддерживает альфа-прозрачность, поэтому вокруг вашего логотипа появляется «линия». Самый простой способ — включить градиент в фон.
Единственной проблемой будет динамически меняющийся фон. Чтобы получить альфа-прозрачность в Интернете, используется файл .png
, который не поддерживает анимацию. Но поскольку у вас есть только два кадра, вы можете имитировать анимацию с помощью простой анимации CSS или JS.
Как предлагает Afterlame, лучшим решением вашей проблемы является:
ИЛИ
Например, можно создать DIV с фоном вашего первого изображения, а затем поместить в него второй кадр в виде IMG. Используя css/js, просто увеличивайте и уменьшайте вложенный IMG, чтобы добиться нужного эффекта.
Зак Сосье