@GeKskill

CSS градиент анимация, убрать жесткие границы?

Как поправить такую анимацию, чтобы не было видно резкого перехода к полной прозрачности? На полном экране градиент к прозрачному плавный, начинаешь уменьшать и появляются отчетливые границы градиента т.е он как будто отсекается.
https://jsfiddle.net/cruasv7y/
667d8d9654c94355601126.png
  • Вопрос задан
  • 155 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Градиент не помещается в свой контейнер (псевдоэлемент в данном случае).
можно увеличивать ширину контейнера или его высоту. можно не указывая высоту, задать aspect-ratio (aspect-ratio:8; для данного случая становится нормальным).
можно изменить контрольные точки. вместо пяти процентов поставить 20-25, но тогда он будет с более резким переходом.
Можно изменить наклон, увеличить угол относительно горизонта.
Можно совместить все методы для достижения оптимального резульата.

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

667da55ab30b6980453961.png

Однако, если ширину холста уменьшить, он перестанет помещаться

667da57a5fe8b668825050.png
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы