169 похожих чатов

Есть градиент linear-gradient(-90deg, #FEE500 3.65%, #FEE500 3.66%, #65B911 51.26%, #71FF4E 98.64%) Задача

сделать анимацию на инверсирование при наведении
есть возможность это сделать нативно в css через анимацию свойства background-size + background-position
У нас горизонтальный градиент
Устанавливаем
background-size: 200% 100%;

Градиент растягивается на все 200%
и мы вместо всей части видим только половину
Для того чтоб видить всё мы должны составить градиент так чтоб его цвета и процентаж были "зеркальными"

Пример с простым градиентом без процентов
linear-gradient(90deg, red, blue)
становится
linear-gradient(90deg, red, blue, red)

Вопрос: как в случае с наличием процентов сделать эту процедуру?

16 ответов

7 просмотров

может кодепен? я б поковырялся

Znacovean-Simion ... Автор вопроса
Андрей
может кодепен? я б поковырялся

https://codepen.io/7iomka/pen/ExNEVQV?editors=1100 Задача сделать работу кнопки btn--fix такой же как и primary то чтоб при наведении градиент инвертировался Для этого нужно "подрихтовать" значения процентов и создать зеркальные показатели вопрос - как это сделать)

Znacovean-Simion ... Автор вопроса
Андрей
screenshot

ну так скинь ссылку на рабочий вариант поглядим)

Znacovean-Simion ... Автор вопроса
Андрей
https://codepen.io/Theandrej/pen/RwoMWzM?editors=1...

https://codepen.io/7iomka/pen/XWNEXjp?editors=1100 без процентов цвета не те убрать проценты и я б мог)

Znacovean Simion ...
https://codepen.io/7iomka/pen/XWNEXjp?editors=1100...

тебе просто нужно отзеркалить их, тоесть подели проценты на 2 и сделай как нада

Znacovean-Simion ... Автор вопроса
Андрей
тебе просто нужно отзеркалить их, тоесть подели пр...

покажи пример) в этом и есть вопрос) я хочу увидеть как ты это сделаешь и какие величины процентов пропишешь

Znacovean-Simion ... Автор вопроса
Znacovean-Simion ... Автор вопроса
Андрей
screenshot

методом эксприментов я пришел к выводу что нужно делать нечто такое (ответ как раз ожидал в таком виде, а не "сам догадаешься что делать")) Например, имеем градиент 90deg, #fee500 3.65%, #65b911 51.26%, #71ff4e 98.64% граница - 50% 1) показатели процентов делим на 2 получаем 90deg, #fee500 1.83%, #65b911 25.63%, #71ff4e 49.32% 2) Поочередно от 50% отнимаем крайний процент и к полученному результату прибавляем 50 получаем следующие 3 зеркальных показателя #71ff4e 50.68%, #65b911 74.37%, #fee500 98.17% 3) Итоговый градиент 90deg, #fee500 1.83%, #65b911 25.63%, #71ff4e 49.32%, #71ff4e 50.68%, #65b911 74.37%, #fee500 98.17% В случае если крайний показатель в процентах упирается в 100% то дубликата серединного цвета не будет

Znacovean Simion ...
методом эксприментов я пришел к выводу что нужно д...

очень простой вопрос, не вижу в чем проблема была(при том что ты понял как ее делать) выглядело что тебе просто лень его сделать, мог не правильно понять сорри:)

Znacovean Simion ...
методом эксприментов я пришел к выводу что нужно д...

неужели при указании хэша цвета, он появляется в телеге?

Znacovean-Simion ... Автор вопроса

Похожие вопросы

Обсуждают сегодня

Всем привет, написал код ниже, но он выдает сегфолт, в чем причина? #include <stdio.h> #include <stdlib.h> #include <string.h> struct product { char *name; float price; };...
buzz базз
70
Всем доброго дня, ребят подскажите пожалуйста, если в курсе по ассемблеру используется MASM32, могу ли я использовать FASM? В чем явная разница и будет ли у меня все работать?
Botsman
17
Хотел бы спросить у знающих, правильную ли я выбрал книгу для начала изучения ассемблера Юрова В.И ? Или есть более лучшие книги для начала обучения?
Botsman
25
Книга Юрова В.И пойдёт для обучения?
Botsman
24
$params = [ 'formid' => 'feedbackForm', 'formTpl' => '@CODE: <form class="form-validate" data-id="ajax_form"> <fieldset class="margin-bottom-md"> ...
Pathologic
1
Люди добрые, помогите с идеями, потому что свои закончились. У клиента падает софтина в момент инициализации модуля OtlEventMonitor на RegisterWindowMessage('Gp/OtlTaskEvents/...
Михаил Усков
7
> Примечательно, что новый владелец удаляет из GitHub любые жалобы, указывающие на подозрительную активность или смену владельца, и, видимо, рассчитывает на то, что пользовате...
Alex Sherbakov
2
GridView fully ignored first parent(SizedBox), and take width from second parent(Container). How can I constrain GridView by first parent? Widget build(BuildContext context) {...
Hamster
1
Коллеги, добрый день. Есть такой вопрос: Есть модуль, который надо запустить через супервизор как дочерний процесс. Пока инстансов было нужно 8, всё было окей, но когда их ст...
Δημήτηρ
4
Hey there Which is the best Linux destro for developers (coding)? To my research on reddit, they said Linux mint is good for mid level spec and Ubuntu for high Lev hardwar...
Wiz 🪄
11
Карта сайта