SVG фильтры для создания эффекта дрожания

Пример с текстом:

Дрожащий текст

c использованием

SVG фильтров

HTML:

<div class="squiggly">
	Дрожащий текст
	<div class="squiggly-small">c использованием</div>
	SVG фильтров 
</div>
<svg style="width:0; height:0" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<defs>
		<filter id="squiggly-0">
			<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
			<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
		</filter>
		<filter id="squiggly-1">
			<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
			<feDisplacementMap in="SourceGraphic" in2="noise" scale="5" />
		</filter>
		<filter id="squiggly-2">
			<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
			<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
		</filter>
		<filter id="squiggly-3">
			<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
			<feDisplacementMap in="SourceGraphic" in2="noise" scale="5" />
		</filter>   
		<filter id="squiggly-4">
			<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
			<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
		</filter>
	</defs> 
</svg>

Дрожащий текст

<div class="squiggly-small">c использованием</div>

SVG фильтров

</div>

<defs>

</filter>

</filter>

</filter>

</filter>

</filter>

</defs>

</svg>

Для увеличения эффекта дрожания нужно увеличить значение scale.

CSS:

.squiggly {
	font-family: 'Roboto Condensed', sans-serif;
	outline: none;
	text-align: center;
	color: #337AB7;
	font-size: 60px;
	line-height: 80px;
	font-weight: bold;
	animation: squiggly-anim 0.25s linear infinite;  
}
.squiggly-small {
	font-size: 26px;
	line-height: 40px;
}
@keyframes squiggly-anim {
	0% {
		filter: url("#squiggly-0");
	}
	25% {
		filter: url("#squiggly-1");
	}
	50% {
		filter: url("#squiggly-2");
	}
	75% {
		filter: url("#squiggly-3");
	}
	100% {
		filter: url("#squiggly-4");
	}
}

.squiggly {

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

outline: none;

text-align: center;

color: #337AB7;

font-size: 60px;

line-height: 80px;

font-weight: bold;

animation: squiggly-anim 0.25s linear infinite;

}

.squiggly-small {

font-size: 26px;

line-height: 40px;

}

@keyframes squiggly-anim {

0% {

filter: url("#squiggly-0");

}

25% {

filter: url("#squiggly-1");

}

50% {

filter: url("#squiggly-2");

}

75% {

filter: url("#squiggly-3");

}

100% {

filter: url("#squiggly-4");

}

Пример с блоком:

Дрожащий блок

HTML и СSS коды такие же, как и у примера с текстом.

Блок для которого накладывается эффект дрожания должен быть помещен в контейнер:

<div class="squiggly"></div>

Пример с текстом:

HTML:

CSS:

Пример с блоком:

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

Проверка на вместимость текста в контейнере

Анимированное подчеркивание текста

Шаблоны сеток на CSS Grid

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

Разделы:

Фоновая анимация на JS

Простые решения: