Дрожащий текст
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>Для увеличения эффекта дрожания нужно увеличить значение 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");
}
}Для блока HTML и СSS коды такие же, как и у примера с текстом. Блок для которого накладывается эффект дрожания должен быть помещен в контейнер:
<div class="squiggly"></div>