Эффект света фонарика на тексте

 Приветствую вас, друзья. Эффект света фонарика мы как - то уже применяли к картинке в блоге. Сегодня хочу показать, как применить такой же к тексту. Но, в отличии от первого, где была использована библиотека 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>

Можно сделать свет фонарика в белом цвете, просто   background: linear-gradient(#f70000, #f89200, #f8f501, #038f00,#0168f8, #a200f7);  заменить на  background: #FFF.

Будет так 

С фоном, размерами текста и области света от фонарика можно поиграться и подогнать под нужные. 

Всем добра и до встречи. Спасибо за внимание. 

Идея с сайта codepen.io 

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email