Приветствую вас, друзья. Эффект
света фонарика
мы как - то уже применяли к картинке в блоге. Сегодня хочу показать, как
применить такой же к тексту. Но, в отличии от первого, где была использована
библиотека jQuery, свет от фонарика на тексте выполнен на CSS, в разы легче и
проще.

Чтобы не ходить вокруг, да около, скопируйте код и просмотрите сам эффект в
этом редакторе. В сообщении блога он тоже протестирован, так что смело можно
применять.
Код
<div class="spotlight" data-text= "Свет фонарика на тексте">
Текст со светом фонарика
</div>
<style>
.spotlight {
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 70px;
line-height: 90px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
padding: 50px 20px;
position: relative;
background: #1f1f1f;
color: #000000;
}
@media screen and (max-width:600px) {
.spotlight {
font-size: 40px;
line-height: 50px;
}
}
.spotlight:before {
content: attr(data-text);
position: absolute;
background: linear-gradient(#f70000, #f89200, #f8f501, #038f00,#0168f8, #a200f7);
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>
Текст со светом фонарика
</div>
<style>
.spotlight {
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 70px;
line-height: 90px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
padding: 50px 20px;
position: relative;
background: #1f1f1f;
color: #000000;
}
@media screen and (max-width:600px) {
.spotlight {
font-size: 40px;
line-height: 50px;
}
}
.spotlight:before {
content: attr(data-text);
position: absolute;
background: linear-gradient(#f70000, #f89200, #f8f501, #038f00,#0168f8, #a200f7);
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>
Можно сделать свет фонарика в белом цвете, просто background: linear-gradient(#f70000, #f89200, #f8f501,
#038f00,#0168f8, #a200f7); заменить на background: #FFF.
Будет так

С фоном, размерами текста и области света от фонарика можно поиграться и
подогнать под нужные.
Всем добра и до встречи. Спасибо за внимание.
Идея с сайта codepen.io
Здесь вы можете оформить подписку на новые шпаргалки
Прикольно! Но этот эффект скорее для одноразовой акции . Но красиво! Спасибо!
ОтветитьУдалитьИрина, можно одноразово, а можно эти стили и заголовку блога прописать. На любителя.
ОтветитьУдалитьИгрушка мне очень понравилась Здорово!
ОтветитьУдалитьСемён, благодарю. А знаете, как это создавать прикольно. А когда результат - вообще. У Вас своё творчество - у меня своё.
ОтветитьУдалить