1

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

т.е.

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

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

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

введите сюда описание изображения

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

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

P.S.

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

1 ответ 1

9

Как-то так

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;
  }
}
<div class="gradient"></div>

6
  • то что надо, спасибо! Дальше напильником докручу
    – Zhihar
    2 мая 2018 в 10:43
  • смущает только, что рывками идет
    – Zhihar
    2 мая 2018 в 11:00
  • Теперь не дёргается
    – zhurof
    2 мая 2018 в 13:48
  • просто более точно задали начало и конец анимации? сделал (когда допиливал) тоже самое - вроде стало без рывков @keyframes move{ from { background-position-x: -45px; } to { background-position-x: 175px; } }
    – Zhihar
    3 мая 2018 в 9:49
  • Не только, градиент теперь отрисовывается на участке шириной 100px. Остальной фон заливается просто цветом. Так затрачивается меньше ресурсов на отрисовку + можно использовать % в background-position
    – zhurof
    3 мая 2018 в 11:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.