Возможен ли такой эффект свечения?

Увидев этот дриббл-шот:

https://dribbble.com/shots/665300-Progress-bar введите здесь описание изображения

Мне действительно интересно, возможно ли воссоздать эффект свечения. Лучшим сценарием было бы, чтобы он работал динамически, может быть, даже мерцал и т. д.

Вероятно, это можно было бы сделать с помощью какого-то статического полупрозрачного свечения, но мне интересно, будет ли это выглядеть хорошо.

Как можно попытаться заставить это работать? Чистый css или что-то совсем другое? Конечно, он должен корректно работать в нескольких браузерах.


animation css css-animations glow
person Stephan-v    schedule 04.05.2014    source источник
comment
Я предполагаю, что это невозможно с чистым CSS, вы можете сделать это с изображением.   -  person Jon Snow    schedule 05.05.2014
comment
Я уверен, что вы сможете создать аналогичный эффект, используя слои box-shadow, но это, вероятно, повлияет на производительность. Поэтому я бы предложил png спрайты.   -  person agrm    schedule 05.05.2014
comment
А как насчет свечения/искры?   -  person Jon Snow    schedule 05.05.2014
comment
Я собираюсь попробовать это завтра. Сначала попробую с чистым css, чтобы посмотреть, как пойдет.   -  person Stephan-v    schedule 05.05.2014

Ответы (1)


arrow_upward
1
arrow_downward

Предполагая, что вы имеете в виду эффект бликов, я бы лично использовал для этого PNG.

<div class="progress">
  <div class="progress-bar" style="width: 69%;"></div>
</div>

Вы можете использовать .progress .progress-bar:after в своем CSS, чтобы добавить background-image светящейся/бликовой графики, которая, поскольку она изолирована в селекторе :after, может быть анимирована независимо (мерцание, пульсация, что угодно).

Если вы еще этого не сделали, ознакомьтесь с компонентом Progress Bar в Bootstrap, так как у них есть довольно обширный набор стилей и вариантов для начала работы.

Ресурсы:

person bluemwhitew    schedule 16.07.2015