css: бегущий градиент

265

03 мая 2018, 05:39

подскажите, можно ли вообще с помощью css реализовать бегущий градиент, чтобы создать имитацию отблеска на элементе

т.е.

1) есть div заданных размеров и однородной закраски фона background

2) при наведении мышки фон меняется на градиентный

3) градиентный фон смещается с начала элемента до конца элемента (светлая линия проходит от начала элемента до конца элемента)

Во Flash это делалось легко - рисовался элемент с градиентом, маска и элемент перемещался под маской.

А можно ли с помощью css сделать такой же эффект (по сути просто изменить положение максимума градиента)

P.S.

Только без использования Javascript, с помощью одной CSS

Answer 1

Как-то так

body{ 
  margin:0; 
} 
.gradient{ 
  background-color:#cda; 
  min-height:100vw; 
  transition:all .2s ease; 
} 
.gradient:hover{ 
  background:linear-gradient(to right,#acd, #fff 30px, #acd 60px) no-repeat -100px 0/100px 100%, #acd; 
  animation:move 5s linear infinite; 
} 
@keyframes move{ 
  from{ 
    background-position:-100px 0; 
  } 
  to{ 
    background-position:120% 0; 
  } 
}