Пример:
Свет фонарика на тексте
HTML:
|
1 2 3 |
<div class="spotlight" data-text= "Свет фонарика на тексте"> Свет фонарика на тексте </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.spotlight { font-family: 'Roboto', sans-serif; font-weight: bold; text-transform: uppercase; font-size: 80px; 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: #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%) } } |
Луч фонаря можно заменить на любой нужный цвет или сделать, например, радужным
Для этого меняем background: #FFF на background: linear-gradient(#f70000, #f89200, #f8f501, #038f00,#0168f8, #a200f7)
Свет фонарика на тексте
Найдено на codepen.io у пользователя Shireen
Добавить комментарий: