-
Автор темы
- #1
Приветствую!
Решил от нечего делать запилить гайд, на тему анимации фона, может кто и захочет себе такое чудо..
Не буду впадать в подробности, мол как и что, расскажу как пользоваться.
На сайте :
Можно наблюдать плавную смену фона и регулировку её, а так же смену разных цветовых гамм.
Чтобы добавить себе такой фон, вам достаточно, скопировать:
Решил от нечего делать запилить гайд, на тему анимации фона, может кто и захочет себе такое чудо..
Не буду впадать в подробности, мол как и что, расскажу как пользоваться.
На сайте :
Пожалуйста, авторизуйтесь для просмотра ссылки.
Можно наблюдать плавную смену фона и регулировку её, а так же смену разных цветовых гамм.
Чтобы добавить себе такой фон, вам достаточно, скопировать:
.class{
animation: gradient 10s infinite;
background-size: 1000% 1000%;
background-size: 1000% 1000%;
}
Подставить ваш класс.
@keyframes gradient {
0% {
background-position: 0% 0%;
}
50% {
50% {
background-position: 100% 100%;
}
100% {
100% {
background-position: 0% 0%;
}
}
Просто добавить в ваш файл стилей.
Ну и конечно же выбрать одну из понравившихся цветовых палитр, для этого выберите себе понравившийся цвет
Затем скопируйте его класс:
Ну и конечно же выбрать одну из понравившихся цветовых палитр, для этого выберите себе понравившийся цвет
Затем скопируйте его класс:
.color-1{
background: linear-gradient(-45deg, #cc2b5e, #753a88);
}
И задайте своего элементу на сайте, точно такое же название class="color-1" в тот же элемент, в котором вы выше ставили себе настройки animation и background-size .
Если мои слова трудны для понимания, вы просто можете скачать готовый результат с rghost и поставить себе на локальный, либо же нормальный хостинг.
Скачать :
Пожалуйста, авторизуйтесь для просмотра ссылки.
Просмотреть результат :
Пожалуйста, авторизуйтесь для просмотра ссылки.
Скриншот:
Последнее редактирование:
