Пример с текстом:
Дрожащий текст
c использованием
SVG фильтров
HTML:
|
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 |
<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:
|
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 |
.squiggly { font-family: 'Roboto', 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>
Добавить комментарий: