Вы видели в Интернете крутые видеоролики, в которых кто-то добавил яркие световые эффекты? Что ж, каждый хочет прославиться в Интернете или хотя бы круто выглядеть перед своими друзьями, и такие видео с эффектами — отличный способ привлечь аудиторию к вашим видео. Сегодня я расскажу вам о трех таких способах, которыми вы можете бесплатно добавить неоновый эффект в свое видео. Читать дальше!
Также прочтите | 3 способа добавить к видео цветные, черно-белые и другие фильтры
История облачных в�.
Шаг 3) Стилизация кнопки
Задаем кнопке размеры и цвет.
a position: relative;
width: 250px;
height: 100px; line-height: 100px;
background: #000;
margin: 10px;
text-transform: uppercase;
font-size: 30px;
letter-spacing: 4px;
text-decoration: none;
>
Шаг 4) Стилизация текста на кнопке
a span <
position: absolute;
display: block;
top: 1px;
left: 1px;
right: 1px;
Как снимать видео дома? YouTube-студия в комнате
bottom: 1px;
text-align: center;
background: #0c0c0c;
color: rgba(255, 255, 255, 0.4);
transition: 0.5s;
z-index: 1;
>
Шаг 5) Hover-эффект для текста
При наведении на кнопку, полупрозрачный текст будет становиться ярче, за счет изменения значения c 0.4 до 1 у альфа-канала (rgba).
a:hover span color: rgba(255, 255, 255, 1);
>
a span:before content: «»;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: rgba(255, 255, 255, 0.1);
>
Шаг 6) Рисуем первую градиентную рамку
a:before <
content: »;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000);
animation: animate 20s linear infinite; / * правила для анимации * /
background-size: 400%;
opacity: 0;
transition: 0.5s;
>
Шаг 7) Рисуем вторую размытую градиентную рамку
a:after <
content: »;
position: absolute;
top: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,#fb0094,#00f,#0f0,#ff0,#f00,#fb0094,#00f,#0f0,#ff0,#f00);
animation: animate 20s linear infinite; / * правила для анимации * /
background-size: 400%;
filter: blur(20px);
opacity: 0;
transition: 0.5s;
>
КАК СНИМАТЬ ВИДЕО ДОМА? Лайфхаки Для Youtube Блогеров
Шаг 8) Неоновый эффект при наведении
Неоновая подсветка должна появляться только при наведении на кнопку. Поэтому прячем градиентные рамки, установив им opacity со значением 0. А при наведении меняем значение opacity на единицу.
a:hover:before,
a:hover:after opacity: 1;
>
Шаг 8) Анимируем неоновое свечение
Вывеска из неона для YOUTUBE канала
блогера Никиты Сударя
Никита Сударь — не скрывающий своего не совсем «правильного» поведения, бунтарь и хулиган, веселый и непредсказуемый; попробовавший силы в нескольких успешных проектах, талантливый исполнитель, выпустивший в 2020-м трек «Вдвоем».
Макет вывески и материалы
Вывеска выполнена из гибкого неона синего, розового, красного и белого цвета толщиной 8 мм
Основание вывески выполнено из прозрачного акрила, прямоугольной формы.
Высота — 700 мм, ширина — 1000 мм, толщина — 5 мм.
Технические характеристики
- Материал: гибкий неон (LED NEON FLEX)
- Цвет: синий (BLUE)/ розовый (PINK) /
красный (RED) / холодный белый (COLD WHITE) - Ширина неона: 8 мм
- Высота неона: 16 мм
- Напряжение: 12V
- Блок питания: 60Вт
- Степень защиты: IP65
- Цвет комплектующих: белый
- Основание: прозрачный акрил
- Толщина акрила: 5 мм
- Габариты: 700 мм / 1000 мм
- Крепление: на стену
- Предназначение: для эксплуатации в помещении
Впечатления Никиты о вывеске
Неоновая вывеска для YOUTUBE канала
блогера Никиты Сударя
https://youtu.be/DPXavqJ7FPw; Впечатления блогера Nikita Sudar; 0:24;
Такой вот он – Никита Сударь, блогер, влогер, певец, мастер монтажа и озвучки: трудно назвать область, в которой он может быть не талантливым. Регулярно стримит на TVICH.
Одно из недавних досижений Никиты- это стрим на протяжении 24 часов без перерыва.
Быть всегда в тонусе и создавать в кадре ламповую атмосферу, Никите, помогает неоновая вывеска сделанная нашей мастерской.
Спасибо за доверие
Источник: n-eon.ru