Пример:
Переливающийся текст
Чем крупнее и жирнее шрифт, тем интереснее и красивее можно настроить эффект переливания.
HTML:
|
1 |
<div class="pouring">Переливающийся текст</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 |
.pouring { font-size: 40px; line-height: 50px; font-family: Verdana, sans-serif; font-weight: 900; position: relative; background: white; overflow: hidden; text-transform: uppercase; text-align: center; } .pouring:before { content: ''; position: absolute; filter: blur(10px); top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: screen; background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #BFE2FF 1em, #337AB7 50%), repeating-linear-gradient(45deg, #337AB7, #337AB7 1em, #FFF 1em, #BFE2FF 50%); background-size: 3em 3em, 2em 2em; animation-name: ani; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes ani { from { background-position: 0 0; } to { background-position: 100% 0; } } @media (max-width:690px) { .pouring {font-size: 20px;} } |
а можно ли сразу несколько цветов сделать или только две
Поменяйте repeating-linear-gradient
Если фон не черный или белый, а задается по хекс коду (#151719, например), не получается сделать цвет фона текста таким же, как цвет фона самой страницы. Как пофиксить?
Текст ставим белый, а mix-blend-mode — multiply
Я вас люблю.Спасибо Вам за все!❤
Здравствуйте
А как сделать чтобы фон было видео?
И на нем данный CSS код с переливающимся текстом
Общий контейнер ставится в relative, а текст накладывается через absolute;
Тут можно посмотреть пример, только вместо канваса у вас будет видео, и соотв. другое оформление текста.
Как сделать фон прозрачный вообще только текст чтобы был
Не понял, какой фон?
Сейчас фон блока - белый, фон текста переливается.
а если фон не белый?? Черный фон не получается сделать..
Заменяем / добавляем
.pouring { background: #000; color: #fff; } .pouring:before { mix-blend-mode: multiply; }