CSS фоновая градиентная анимация - PullRequest
Новая
       50

CSS фоновая градиентная анимация

3 голосов
/ 05 мая 2019

Я хочу создать анимацию загрузки блеска, которая будет отображаться на нескольких элементах с разными цветами фона.

В настоящее время я использую градиент background-image и анимирую background-position с помощью vw единиц, но это не масштабируется, мои элементы будут иметь разную длину.

Есть ли способ, которым я могу анимировать background-image с процентными единицами?

Созданная анимация 

body {
  background: black;
}

header {
  width: 100%;
  height: 50px;
  background-color: rebeccapurple;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-position: -100vw;
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    background-position: -100vw;    
  }
  100% {
    background-position: 100vw;   
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>  
</head>
<body>
  
  <header></header>
  

</body>
</html>

1 Ответ

2 голосов
/ 05 мая 2019

Идея состоит в том, чтобы сделать размер градиента в 3 раза больше контейнера и закрасить его среднюю часть, а затем сдвинуть его слева направо:

enter image description here

body {
  background: black;
}

.box {
  height: 50px;
  margin:5px;
  background-color: rebeccapurple;
  background-image: linear-gradient(
    to right,
    transparent 33%,
    rgba(255,255,255,0.3) 50%,
    transparent 66%
  );
  background-size:300% 100%;
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    background-position: right;    
  }
  /*100% {
    background-position: left; it's the default value, no need to define it
  }*/
}
<div class="box"></div>

<div class="box" style="width:60%"></div>

<div class="box" style="width:40%"></div>

Смежный вопрос: Использование процентных значений с фоновой позицией на линейном градиенте

...