Как создать градиент с анимацией на css?

Question

[Hikky]

Всем привет! Возникло пару вопросов с реализацией ховер эффектов с использованием CSS:

1. Как создать border для input с градиентом, только через псевдоэлемент?
2. Как создать эффект для input, button градиентный эффект, как при смена угла.

Пр: linear-gradient(0deg, rgb(255, 174, 0) 0px, rgb(249, 232, 102) 100%); меняется через 1 секунду на linear-gradient(360deg, rgb(255, 174, 0) 0px, rgb(249, 232, 102) 100%); и так циклом, пока пользователь наводил на кнопку / поле в фокусе.

Comments

[Ankhena]

1. Как создать border для input с градиентом, только через псевдоэлемент?

У инпута нет before и after

Градиенты не анимируются, но зато анимируется положение фона или положение блока (а для кнопок псевдо).

Answer 1

[HamSter]

Не совсем понятно, но предположу jsBin:

<form>
  <div class="form-group">
    <input type="text" name="name" class="form-control" placeholder="Your Name">
  </div>
  
  <button type="submit"><span>Submit</span></button>
</form>

* {
  box-sizing: border-box;
}

.form-group {
  position: relative;
  background: #fff;  
}

.form-control {
  width: 100%;
  height: 2.5rem;
  background: transparent;
  border: none;
}

button {
  border:none;
  background: transparent;
  position: relative;
  padding: 1rem 2rem;
}

button span {
  position: relative;
  z-index: 3;
}

button:after,
.form-group:after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
  background: linear-gradient(0deg, rgb(255, 174, 0) 0px, rgb(249, 232, 102) 100%);
  
  z-index: -1;
  -webkit-animation: animatedgradient 1s ease alternate infinite;
          animation: animatedgradient 1s ease alternate infinite;
  
  background-size: 100% 200%;
  background-position: 0 100%;
}


@-webkit-keyframes animatedgradient {
  100% {
      background-position: 0 0;
  }
}


@keyframes animatedgradient {
  100% {
    background-position: 0 0;
  }
}

Answer 2

[RAX7]