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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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