Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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

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


4 комментария:

  1. Прикольно! Но этот эффект скорее для одноразовой акции . Но красиво! Спасибо!

    ОтветитьУдалить
  2. Ирина, можно одноразово, а можно эти стили и заголовку блога прописать. На любителя.

    ОтветитьУдалить
  3. Игрушка мне очень понравилась Здорово!

    ОтветитьУдалить
  4. Семён, благодарю. А знаете, как это создавать прикольно. А когда результат - вообще. У Вас своё творчество - у меня своё.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML