« Радужный прожектор для текста на чистом CSS »
Описание материала:
Предлагаем вашему вниманию радужный прожектор для текста, с использованием стилей CSS и HTML кода. Данный текст может хорошо подойти под логотип или под другие нужды вашего сайта. В нашем варианте используется всего один class стилей, под названием ufive_pr. Шрифт используемый у нас в демонстрации, относится к семейству Teko, ссылку на его подключение будет чуть ниже. Размер шрифта составляет 170px, его можно будет изменить в CSS, так же как и шрифт, и всё остальное.
Установка:
Подключаем шрифт Teko:
Код
<link href="https://fonts.googleapis.com/css?family=Teko:700&display=swap" rel="stylesheet">
HTML код:
Код
<span class="ufive_pr" data-text="ufive.ru">ufive.ru</span>
CSS код:
Код
.ufive_pr {
font-family: "Teko", sans-serif;
text-transform: uppercase;
font-size: 170px;
text-align: center;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
margin: 0;
min-height: calc(100vh - 16px);
position: relative;
color: #000;
}
.ufive_pr:before {
content: attr(data-text);
position: absolute;
background: linear-gradient(
#f70000,
#f89200,
#f8f501,
#038f00,
#0168f8,
#a200f7
);
-webkit-background-clip: text;
color: transparent;
background-size: 100% 90%;
line-height: 0.9;
clip-path: ellipse(120px 120px at -2.54% -9.25%);
animation: swing 5s infinite;
animation-direction: alternate;
}
@keyframes swing {
0% {
clip-path: ellipse(120px 120px at -2.54% -9.25%);
}
50% {
clip-path: ellipse(120px 120px at 49.66% 64.36%);
}
100% {
clip-path: ellipse(120px 120px at 102.62% -1.61%);
}
}
font-family: "Teko", sans-serif;
text-transform: uppercase;
font-size: 170px;
text-align: center;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
margin: 0;
min-height: calc(100vh - 16px);
position: relative;
color: #000;
}
.ufive_pr:before {
content: attr(data-text);
position: absolute;
background: linear-gradient(
#f70000,
#f89200,
#f8f501,
#038f00,
#0168f8,
#a200f7
);
-webkit-background-clip: text;
color: transparent;
background-size: 100% 90%;
line-height: 0.9;
clip-path: ellipse(120px 120px at -2.54% -9.25%);
animation: swing 5s infinite;
animation-direction: alternate;
}
@keyframes swing {
0% {
clip-path: ellipse(120px 120px at -2.54% -9.25%);
}
50% {
clip-path: ellipse(120px 120px at 49.66% 64.36%);
}
100% {
clip-path: ellipse(120px 120px at 102.62% -1.61%);
}
}
Демонстрация
Демонстративная страница или сайт материала
Установка материалаМы поможем установить данный материал к Вам на сайт
Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 367
Теги к материалу:
Поделиться в соц. сетях:
К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!
Комментариев: 0
| |