Голографический эффект с анимацией
В этой мастерской мы покажем, как с помощью конического градиента создать потрясающий декоративный эффект. Мы анимируем заклинание «Кольцо льда» из всем известной игры «Герои Меча и Магии III» и заставим его плавно переливаться.
Видеоверсия этого курса доступна во ВКонтакте и на Ютюбе
В начальном состоянии у нас есть карточка с базовыми стилями: ширина, внутренние отступы, цвет фона и параметры текстовых элементов.
Добавим в разметку содержимое карточки — логотип, заголовок и описание.
Добавим типовую разметку для создания «голограмм»:
- обертка
.shader, - внутри неё содержатся изображение и контейнер
.shader__layer, - внутри
.shader__layer находится ещё один .shader__layer.
Внешний .shader__layer служит для «осветления» изображения, а внутренний — для создания маски.
Зададим карточке относительное позиционирование.
Теперь зададим .shader абсолютное позиционирование и привяжем его к правому нижнему углу карточки так, чтобы на карточку попадала нужная часть иллюстрации.
Для этого эффекта важно, чтобы внутренние элементы контейнера располагались точно друг над другом. Проще всего этого добиться, задав контейнеру фиксированные размеры и придерживаться этих размеров для его потомков.
CSS-свойство backface-visibility: hidden помогает оптимизировать производительность эффекта, а overflow: hidden обрежет всё лишнее за пределами контейнера (хотя это больше перестраховка).
Явно укажем ширину изображения внутри контейнера .shader. Это мера предосторожности на случай, если для тега img ширина не будет задана.
Привяжем размеры «слоёв» .shader__layer к размерам контейнера .shader и сделаем так, чтобы они располагались над изображением.
Для этого зададим .shader__layer абсолютное позиционирование, нулевые значения для top и left, а также 100% ширину и высоту.
Временно зададим чёрный полупрозрачный фон, чтобы лучше видеть слои.
Для полноценной работы декоративного эффекта оба блока .shader__layer должны иметь полностью чёрный фон, и мы сделаем его таким в самом конце.
Голографический эффект состоит из двух частей: «маски» и блика. Блик осветляет всё под собой, а маска придаёт блику нужную форму. Важно не путать эту маску с CSS-масками, создаваемыми с помощью свойства mask.
В качестве фона маски используем изображение ice-ring.png ещё раз. Этот приём (одинаковое изображение под маской и в качестве маски) обеспечит блику нужную форму.
Зададим фоновому изображению маски те же размеры, что и тегу img. Теперь оба изображения полностью совмещены, причём контейнер с фоном расположен над img.
Займёмся созданием блика. Используем конический градиент в качестве фонового изображения для блока .specular. Мы получили следующий набор слоёв с изображениями:
- фоновое изображение блока
.mask расположено выше всех, - под ним находится градиентный фон блока
.specular, - тег
img расположен в самом низу.
Анимируем конический градиент, чтобы он вращался по кругу.
Сначала зарегистрируем переменную — --angle — через @property. Без этого анимация градиента работать не будет.
Добавим переменную --angle в CSS-правило .specular, а также подставим эту переменную в функцию conic-gradient() в качестве начального угла.
Зададим для .specular бесконечную линейную анимацию с именем spin и длительностью 5 секунд.
Добавим ключевые кадры анимации spin, в которых будем менять --angle до 360deg в конечном состоянии.
Конический градиент начал своё бесконечное вращение по кругу.
В сердце голографического эффекта находится свойство mix-blend-mode. Значение multiply на элементе .mask «обрежет» градиентный фон под фоновым изображением маски.
Итоговый эффект обрезки будет виден, когда мы зададим для .shader__layer полностью чёрный цвет фона. Если хотите увидеть это сейчас, увеличьте значение непрозрачности в rgba(0, 0, 0, 0.1).
Значение color-dodge на элементе .specular усилит светлые области картинки, находящейся под блоком. Причём благодаря маске цвета усилятся только в области изображения.
Теперь зададим полностью чёрный цвет фона обоим слоям. Маска срабатывает в полную силу, обрезая градиент под собой. При этом фигурно обрезанный градиент начинает усиливать светлые области картинки, находящейся под ним.
Обрежем выступающую за пределы карточки часть блока .shader с помощью overflow: hidden у .card. Голографический эффект готов!
Вы можете экспериментировать с цветами конического градиента, чтобы получить разные варианты свечения.
