Переливающийся текст на CSS

Пример:

Переливающийся текст

Чем крупнее и жирнее шрифт, тем интереснее и красивее можно настроить эффект переливания.

HTML:

<div class="pouring">Переливающийся текст</div>

1	<div class="pouring">Переливающийся текст</div>

CSS:

.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;}	
}

.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;}

}

Константин: 29.08.2023 в 23:01

а можно ли сразу несколько цветов сделать или только две

Ответить
- Alexander: 30.08.2023 в 10:41
  
  Поменяйте repeating-linear-gradient
  
  Ответить
Мастурбек: 24.09.2022 в 21:52

Если фон не черный или белый, а задается по хекс коду (#151719, например), не получается сделать цвет фона текста таким же, как цвет фона самой страницы. Как пофиксить?

Ответить
- Alexander: 27.09.2022 в 10:50
  
  Текст ставим белый, а mix-blend-mode — multiply
  
  Ответить
Жасмин: 31.01.2022 в 23:32

Я вас люблю.Спасибо Вам за все!❤

Ответить
Vladimir: 13.12.2021 в 11:14

Здравствуйте
А как сделать чтобы фон было видео?
И на нем данный CSS код с переливающимся текстом

Ответить
- Alexander: 13.12.2021 в 11:19
  
  Общий контейнер ставится в relative, а текст накладывается через absolute;
  Тут можно посмотреть пример, только вместо канваса у вас будет видео, и соотв. другое оформление текста.
  
  Ответить
Женя: 09.01.2021 в 16:32

Как сделать фон прозрачный вообще только текст чтобы был

Ответить
- Alexander: 09.01.2021 в 17:29
  
  Не понял, какой фон?
  Сейчас фон блока - белый, фон текста переливается.
  
  Ответить
Наталья: 02.09.2020 в 17:01

а если фон не белый?? Черный фон не получается сделать..

Ответить
- Alexander: 02.09.2020 в 17:25
  Заменяем / добавляем
  
  .pouring { background: #000; color: #fff; } .pouring:before { mix-blend-mode: multiply; }
  Ответить

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Комментарии: