Креативный эффект для секции с текстом

Код для данного решения относительно прост, но требует конкретной подгонки всех параметров под размер секции и количества текста.

Пример:

CSS:

.txt-section {
	height: 30vw;
	box-shadow: 0 8px 16px rgba(0,0,0,0.3), 0 28px 30px rgba(0,0,0,0.2);
}
.txt-section svg {
	background-image: url(bg.jpg);
	background-size: cover;
	background-position: center;
	height: 100%;
	width: 100%;
}
.txt-section text {
	font-size: 5vw;
	font-weight: bold;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);    
}
.txt-section tspan {
	font-size: 3vw;
}
.txt-section .xx {
	animation-name: xMove;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}
.txt-section .yy {
	animation-name: yMove;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}
@keyframes xMove {
	from {transform:translateX(0);}
	to {transform:translateX(100%)}
}
@keyframes yMove {
	from {transform:translateY(0);}
	to {transform:translateY(100%)}
}

.txt-section {

height: 30vw;

box-shadow: 0 8px 16px rgba(0,0,0,0.3), 0 28px 30px rgba(0,0,0,0.2);

}

.txt-section svg {

background-image: url(bg.jpg);

background-size: cover;

background-position: center;

height: 100%;

width: 100%;

}

.txt-section text {

font-size: 5vw;

font-weight: bold;

font-family: 'Roboto', sans-serif;

text-transform: uppercase;

text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);

}

.txt-section tspan {

font-size: 3vw;

}

.txt-section .xx {

animation-name: xMove;

animation-duration: 1.5s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-timing-function: linear;

}

.txt-section .yy {

animation-name: yMove;

animation-duration: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-timing-function: linear;

}

@keyframes xMove {

from {transform:translateX(0);}

to {transform:translateX(100%)}

}

@keyframes yMove {

from {transform:translateY(0);}

to {transform:translateY(100%)}

}

HTML:

<div class="txt-section">
	<svg>
		<defs>
			<mask id="mask1">
				<text y="40%" x="50%" fill="white" text-anchor="middle">Саратов
					<tspan y="75%" x="50%">Столица Поволжья!</tspan>
				</text>
			</mask>
		</defs>
		<text y="40%" x="50%" fill="#337AB7" text-anchor="middle">Саратов
			<tspan y="75%" x="50%">Столица Поволжья!</tspan>
		</text>   
		<g class="xx">
			<g class="yy">    
				<circle x="0" y="0" r="15%" stroke="#337AB7" stroke-width="3" fill="rgba(0,0,0,.3)"/>   
			</g>
		</g>
		<g mask="url(#mask1)"> 
			<g class="xx">
				<g class="yy">
					<circle x="0" y="0" r="15%" stroke="337AB7" stroke-width="3" fill="#BFE2FF"/>
				</g>
			</g> 
		</g>   
	</svg>
</div>

<svg>

<defs>

<text y="40%" x="50%" fill="white" text-anchor="middle">Саратов

<tspan y="75%" x="50%">Столица Поволжья!</tspan>

</text>

</mask>

</defs>

<text y="40%" x="50%" fill="#337AB7" text-anchor="middle">Саратов

<tspan y="75%" x="50%">Столица Поволжья!</tspan>

</text>

</g>

</g>

</svg>

</div>

За основу взято решение, найденное на codepen.io у пользователя Jomohop

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на мобильном Сгенерировать QR-код для перехода на эту страницу с телефона

Опубликовано: 21.10.2022
Рубрики: Секции, Тексты, ссылки и кнопки
Метки: CSS, SVG
3308 просмотров

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

Глассморфные кнопки

Глассморфные (стекломорфные) кнопки с ховер-эффектом

Кнопки закрытия на CSS

Варианты оформления закрывающих кнопок (close button) на CSS

Оформление ссылок на социальные сети

Установка и варианты оформления кнопок "поделиться" в соц. сетях или перейти в вашу группу (аккаунт)

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

Ваш комментарий отправлен!