Vingette-эффект на чистом CSS3 (animation). Кто поможет?

Question

[xmoonlight]

Коллеги, приветствую.
Надо сделать такой эффект:
на чистом CSS3.
Это вообще реально?
Заранее, Спасибо!

Comments

[copal]

Я в css ничего не понимаю, но вижу дело так... Три слоя, первый сама картинка, второй черный квадрат, третий круг с вписанным в него предыдущими двумя слоями. На круг наложен фильтр, который делает картинку "нужно" (такие в гугле есть) + он должен иметь такое наложение, чтобы образовывая с черным квадратом связь, накладывался на него скрывая этот черный квадрат. Это пять минут прогнать и подобрать нужное наложение. Все, остается только круг сжать и потом при помощи анимации увеличивать его.

[xmoonlight]

copal: я ничего не понял.

Answer 1

[Алексей Струков]

Реально думаю.
Надо сделать поверх этой картинки спрайт из картинок с radial-gradient с переходом от прозрачного цвета в черный и потом анимировать эти спрайты с функцией step().
Или даже без картинок попробовать приближать css radial-gradient с помощью transform: scale(), предварительно добавив родителю свойство overflow: hidden

Comments

[xmoonlight]

А примерчик на jsfiddle не могли бы накидать?

[Алексей Струков]

xmoonlight: к сожалению с телефона сейчас сижу(
Будет не удобно. Первый вариант во первых это надо в фотошопе заранее подготовить спрайт нужного размера, но этот способ более громоздкий. Второй способ могу сделать в редакторе, но уже когда у компьютера буду попозже

[Алексей Струков]

xmoonlight: вот: https://jsfiddle.net/ka4t1oe4/
Там можно еще с настройками background: radial-gradient() поиграться для получения более красивых эффектов

[Алексей Струков]

еще в ховере если поставить scale(40) то фаерфокс более плавнее рисует градиент. Ну а вообще по хорошему этот код надо пропустить через автопрефиксер

[xmoonlight]

Алексей Струков: Супер! Спасибо! А если мне надо после загрузки страницы просто автоматически раскрыть (также, как и сейчас при наведении "мышки" (hover)) и оставить в таком состоянии. Т.е. однократно чтобы сработало и зафиксировалось, показывая нормально всю картинку и больше не менялось.
Такое возможно?

[Алексей Струков]

xmoonlight: это уже с помощью анимации надо делать. Там есть свойство которое позволяет оставить состояние элемента по последнему кадру анимации. Но вроде есть еще один способ, ща потестирую

[Алексей Струков]

xmoonlight: вот так только возможно сделать https://jsfiddle.net/ka4t1oe4/1/
если надо чтобы картинки изначально были темные а после наведения всегда оставались видимыми, то только через js. Кстати а почему без джаваскрипта именно надо?

[Алексей Струков]

xmoonlight: сначала не так прочитал вопрос. Если надо чтоб просто при загрузке этот эффект применился то убери из моего моследнего jsfiddle анимацию из ховера и поставь ее в сам элемент, а из элемента убери transform: scale(30)

[xmoonlight]

Алексей Струков: Спасибо, подправил сейчас по последнему комменту - все работает. Последнее, чтобы анимировать background у всей страницы (body): т.е. чтобы сразу после загрузки - можно было бы кликать по элементам, а эффект - на фоне применялся бы не мешая(не перекрывая)... Как сделать? (сейчас то присутствует блок-фореграунд...)

[Алексей Струков]

xmoonlight: не совсем понял о чем Вы)
Есть какой то пример чтоб нагляднл посмотреть?
Ну или более подробно распишите плиз

[xmoonlight]

Алексей Струков: на body в стиле есть картинка на весь экран (background cover). Вот при загрузке страницы надо сделать анимацию этого фона.
Но так, чтобы в момент анимации уже можно бы было работать со страницей. Т.е. ИМЕННО фон. (чтобы не накрывать слоем всё окно)

[Алексей Струков]

xmoonlight: ясно
попозже выложу код
там не сложно вроде

[xmoonlight]

Алексей Струков: Спасибо!

[Алексей Струков]

xmoonlight: вот код: https://jsfiddle.net/oupkw5ea/
Сам под свой сайт там настрой анимацию, маргины и т.п. как будет лучше и дополнительные свойства для бэкграунда у боди при необходимости проставь.

[xmoonlight]

Алексей Струков: правильно я понимаю, что без псевдо-бэкграунда в виде блока foreground никак не сделать, да?

[Алексей Струков]

xmoonlight: ага. ну если только всякими псевдоэлементами попробовать

[Алексей Струков]

xmoonlight: переделал с псевдоэлементом. так даже правильней будет
https://jsfiddle.net/oupkw5ea/2/

[xmoonlight]

Алексей Струков: Супер! Спасибо огромное! Отписался на почту.

Answer 2

[Андрей Федоров]

Держите. Но работает только в хроме кажется...
codepen.io/aliencash/pen/xZpQEY

Comments

[xmoonlight]

Да... в FireFox - не работает.... Это лучший пока из всех! Спасибо!
А как заставить работать в FireFox - есть мысли?

[Андрей Федоров]

Со временем заработает думаю... Может быть автопрефиксер поможет, но -moz не работает, я проверял...

[Андрей Федоров]

xmoonlight: Еще пришло в голову modernize.js. Недавно видел вопрос по круговой волне на кнопке, может быть удастся что-то подобное сделать...

[xmoonlight]

Андрей Федоров: на JS - понятное дело проще... Надо именно исключительно на CSS. Искал в инете - у всех проблема с FF....(

Answer 3

[everliving]

Тут есть варианты с помощью border и mask codepen.io/Grsmto/pen/Jpksw

Comments

[xmoonlight]

Мне нужно как в примере...