Анимированная типографика на CSS3
Каждая буква создана с помощью нескольких элементов HTML и каждая часть буквы будет иметь собственное объявление CSS-анимации, но с разными задержками. Это отзывчивая типографика. Лучше всего она будет смотреться на экранах с разрешением 1920px или 1000px и ниже. Типографика будет трансформироваться в том случае, если ширина экрана будет 1280px и 1024px.
HTML:
<!--[if lte IE 10]> <style type='text/css'> html body #typo-wrap { margin:0 auto !important; padding:10px; } </style> <![endif]--> <section id="typo-wrap"> <h1><!-- --><span class="char char-w collapsed">W<!-- --><span class="part-1 bevel bevel-left-bottom"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4 bevel bevel-bottom-middle"></span><!-- --></span><!-- --><span class="char char-h collapsed">H<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --></span><!-- --><span class="char char-i collapsed"><span>I</span></span><!-- --><span class="char char-t collapsed">T<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --></span><!-- --><span class="char char-e collapsed">E<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char char-s">S<!-- --><span class="part-1 bevel bevel-left-top"></span><!-- --><span class="part-2 bevel bevel-left-bottom bevel-right-top"></span><!-- --><span class="part-3 bevel bevel-right-bottom"></span><!-- --><span class="part-4"></span><!-- --><span class="part-5"></span><!-- --></span><!-- --><span class="char char-p">P<!-- --><span class="part-1 bevel bevel-right-top"></span><!-- --><span class="part-2 bevel bevel-right-bottom"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char char-a">A<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3 bevel bevel-left-top"></span><!-- --><span class="part-4 bevel bevel-right-top"></span><!-- --></span><!-- --><span class="char char-c">C<!-- --><span class="part-1 bevel bevel-left-top"></span><!-- --><span class="part-2 bevel bevel-left-bottom"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char char-e">E <!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char char-small char-i clear">I</span><!-- --><span class="char char-small char-s">S <!-- --><span class="part-1 bevel bevel-left-top"></span><!-- --><span class="part-2 bevel bevel-right-bottom"></span><!-- --><span class="part-3 bevel bevel-left-bottom bevel-right-top"></span><!-- --><span class="part-4"></span><!-- --><span class="part-5"></span><!-- --></span><!-- --><span class="char char-b clear">B<!-- --><span class="part-1 bevel bevel-right-top"></span><!-- --><span class="part-2 bevel bevel-right-middle"></span><!-- --><span class="part-3 bevel bevel-right-bottom"></span><!-- --><span class="part-4"></span><!-- --><span class="part-5"></span><!-- --></span><!-- --><span class="char char-r">R<!-- --><span class="part-1 bevel bevel-right-top"></span><!-- --><span class="part-2 bevel bevel-right-middle"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char char-e">E<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char char-a">A<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3 bevel bevel-left-top"></span><!-- --><span class="part-4 bevel bevel-right-top"></span><!-- --></span><!-- --><span class="char char-t">T<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --></span><!-- --><span class="char char-h">H,<br><!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --></span><!-- --><span class="char char-w collapsed clear">W<!-- --><span class="part-1 bevel bevel-left-bottom"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4 bevel bevel-bottom-middle"></span><!-- --></span><!-- --><span class="char char-h collapsed">H<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --></span><!-- --><span class="char char-i collapsed"><span>I</span></span><!-- --><span class="char char-t collapsed">T<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --></span><!-- --><span class="char char-e collapsed">E<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char same char-s">S<!-- --><span class="part-1 bevel bevel-left-top"></span><!-- --><span class="part-2 bevel bevel-left-bottom bevel-right-top"></span><!-- --><span class="part-3 bevel bevel-right-bottom"></span><!-- --><span class="part-4"></span><!-- --><span class="part-5"></span><!-- --></span><!-- --><span class="char same char-p">P<!-- --><span class="part-1 bevel bevel-right-top"></span><!-- --><span class="part-2 bevel bevel-right-bottom"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char same char-a">A<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3 bevel bevel-left-top"></span><!-- --><span class="part-4 bevel bevel-right-top"></span><!-- --></span><!-- --><span class="char same char-c">C<!-- --><span class="part-1 bevel bevel-left-top"></span><!-- --><span class="part-2 bevel bevel-left-bottom"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char same char-e">E <!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char char-small char-i clear">I</span><!-- --><span class="char char-small char-s">S <!-- --><span class="part-1 bevel bevel-left-top"></span><!-- --><span class="part-2 bevel bevel-right-bottom"></span><!-- --><span class="part-3 bevel bevel-left-bottom bevel-right-top"></span><!-- --><span class="part-4"></span><!-- --><span class="part-5"></span><!-- --></span><!-- --><span class="char char-f clear">F<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --></span><!-- --><span class="char char-r">R<!-- --><span class="part-1 bevel bevel-right-top"></span><!-- --><span class="part-2 bevel bevel-right-middle"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char char-e">E<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char char-e">E<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="char char-d">D<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3"></span><!-- --><span class="part-4 bevel bevel-right-top bevel bevel-right-bottom"></span><!-- --><span class="part-5"></span><!-- --></span><!-- --><span class="char char-o">O<!-- --><span class="part-1"></span><!-- --><span class="part-2"></span><!-- --><span class="part-3 bevel bevel-left-top bevel-left-bottom"></span><!-- --><span class="part-4 bevel bevel-right-top bevel-right-bottom"></span><!-- --></span><!-- --><span class="char char-m">M<!-- --><span class="part-1"></span><!-- --><span class="part-2 bevel bevel-top-middle"></span><!-- --><span class="part-3 bevel bevel-right-top"></span><!-- --><span class="part-4"></span><!-- --></span><!-- --><span class="blink">.</span> </h1> <div class="clear"></div> </section>