Прожектор на тексте
Выглядит оформление так: по тексту бегает луч прожектора или фонарика и освещает буквы. Луч можно сделать разноцветным или однотонным.
"Вживую" посмотреть как работает оформление текста можно в визуальном редакторе, так же в нём удобно делать различные изменения в коде.
Код оформления
<div class="spotlight" data-text= "Здесь будет ваш любой текст">
Здесь будет ваш любой текст
</div>
<style>
.spotlight {
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 60px;
line-height: 90px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
padding: 50px 20px;
position: relative;
background: #4c14c6;
color: #2e0f73;
}
@media screen and (max-width:600px) {
.spotlight {
font-size: 40px;
line-height: 50px;
}
}
.spotlight:before {
content: attr(data-text);
position: absolute;
background: #FFF;
padding: 50px 20px;
-webkit-background-clip: text;
color: transparent;
background-size: 100% 90%;
clip-path: ellipse(60px 60px at -2.54% -9.25%);
animation: swing 5s infinite;
animation-direction: alternate;
}
@keyframes swing {
0%{
clip-path: ellipse(60px 60px at -2.54% -9.25%)
}
50%{
clip-path: ellipse(120px 120px at 49.66% 64.36%);
}
100%{
clip-path: ellipse(80px 80px at 102.62% -1.61%)
}
}
</style>
Что можно поменять в коде:
Два раза меняем текст на свой. Выделила в коде красным цветом.Оранжевым выделила шрифт.
Жёлтым — насыщенность начертания шрифта (тонкий, жирный или стандартный).
Зелёным — размер букв.
Синим — цвет фона подложки.
Салатовым — цвет букв.
Если делаем свет прожектора цветным, то меняем в коде цвет #FFF на любой свой.
Если нужен разноцветный свет фонарика, то для этого меняем строку background: #FFF на background: linear-gradient (#f70000, #7f74d0, #00dbfe, #038f00, #f8ff00, #a200f7). Цвета меняем на любые свои.
Комментарии со спамом удаляются.