CSS для создания анимированного градиентного фона кнопки - PullRequest
Новая
       95

CSS для создания анимированного градиентного фона кнопки

0 голосов
/ 02 июля 2018

Я ищу правило CSS, которое может создать анимацию CSS для цветного градиентного фона кнопки .

Я просто пытаюсь поиграть с этим и сделал это: https://codepen.io/prashant-nadsoftdev/pen/bKzOrB.

.custom-btn {
  background: linear-gradient(105deg, #f6d365, #fda085, #f6d365, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 200% 200%;
  -webkit-animation: rainbow 5s ease infinite;
  -z-animation: rainbow 5s ease infinite;
  -o-animation: rainbow 5s ease infinite;
  animation: rainbow 5s ease infinite alternate;
  border: 0;
  padding: 25px;
  font-size: 40px;
  color: #fff;
}
@-webkit-keyframes rainbow {
  0%{background-position:0% 100%}
  100%{background-position:100% 0%}
}
@-moz-keyframes rainbow {
  0%{background-position:0% 100%}
  100%{background-position:100% 0%}
}
@-o-keyframes rainbow {
  0%{background-position:0% 100%}
  100%{background-position:100% 0%}
}
@keyframes rainbow { 
  0%{background-position:0% 100%}
  100%{background-position:100% 0%}
}
<body style="text-align:center;">
  <button class="custom-btn">My Button</button>
</body>

Мне нужно, чтобы цвета шли один за другим только в одном направлении (слева направо). Код, который у меня есть, близок, но мне все еще нужны две вещи:

  1. Направление неверное (необходимо точное противоположное направление при смене цвета).
  2. Это не должно останавливаться. После последнего цвета он должен взять первый цвет и затем продолжить.

1 Ответ

0 голосов
/ 02 июля 2018

Чтобы анимация градиента повторялась бесконечно в одном направлении, главное, что вам нужно сделать, это настроить цветовые градиенты в вашем градиенте:

  1. Повторите свои градиентные остановки дважды. (Это делает конец вашего градиента похожим на начало, обеспечивая плавный переход между каждым повторением анимации.)
  2. Повторите свою первую градиентную остановку снова в конце. (Это делает последний стоп смешанным с первым.)

Вам также необходимо настроить ключевые кадры, чтобы они двигались в нужном вам направлении (см. Код ниже). 

.custom-btn {
  background: linear-gradient(105deg,
    /* Base gradient stops */
    #f6d365, #fda085, #f6d365, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3,
    /* Repeat your base gradient stops */
    #f6d365, #fda085, #f6d365, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3,
    /* Repeat your first gradient stop */
    #f6d365);
  
  background-size: 200% 200%;
  animation: rainbow 5s linear infinite;
  border: 0;
  padding: 25px;
  font-size: 40px;
  color: #fff;
}

@keyframes rainbow {
    0% { background-position: 100% 100% }
  100% { background-position: 0% 0% }
}
<body style="text-align:center;">
  <button class="custom-btn">My Button</button>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...