Анимированный фон элемента h1 - PullRequest
Новая
       40

Анимированный фон элемента h1

0 голосов
/ 27 октября 2019

Фон не меняется даже при включении jQueryUI или при попытке изменить его на простой цвет, например 'red', вместо linear-gradient(). 

$('#the-button').click(function() {
  $('#something').animate({
    background: "linear-gradient(to right, blue, white)"
  }, 1000);
});
div {
  background: #000;
  width: 480px;
  height: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

h1 {
  font-size: 48px;
  font-family: arial;
  background: linear-gradient(to right, red, green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <h1 id="something">Something</h1>
</div>
<input type="button" id="the-button" value="Animate">

Полный код можно посмотреть по адресу https://codepen.io/KaiZoDa128/pen/WNNOYaZ

Заранее спасибо.

1 Ответ

2 голосов
/ 27 октября 2019

Я считаю, что вы не можете анимировать градиент (по крайней мере, с CSS, я думаю, то же самое относится и к jquery). А для простого цветового теста это просто те градиенты, которые являются изображениями, «покрывают» цвет фона, поэтому, если у вашего элемента есть градиент, и вы добавляете цвет фона, вы его не увидите.

Но вы могли бы возможно сделать это с помощью псевдоэлементов CSS :before и :after.

...