Възможен ли е този вид ефект на блясък?

След като видях този удар с дрибъл:

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
Сигурен съм, че ще можете да създадете подобен ефект, като използвате слоеве сенки в кутия, но това вероятно ще повлияе на производителността. Затова бих предложил 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 селектор, може да бъде анимирана независимо (мигаща, пулсираща, каквото искате).

Ако все още не сте го направили, разгледайте компонента на лентата на напредъка в Bootstrap, тъй като те имат доста обширен набор от стилове и варианти, за да започнете.

Ресурси:

person bluemwhitew    schedule 16.07.2015