Упругость

Слизал с сайта блога Ильи Бирмана прикольный эффект и выложил у себя на мини-сайте. Вот код HTML-страницы:

Показать

<!DOCTYPE html>
<html>
  <head>
    <title>Soul</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="utf-8"/>
    <style type="text/css">
        html,body{height:100%;padding:0;margin:0}
        #lh{display:table;height:100%;overflow:hidden;width:100%}
        #lh2{display:table-cell;vertical-align:middle;width:100%}
        #lh3{height:150px;width:150px;margin:auto;position:relative}
        #lg{display:block;margin:auto;top:0;left:0}
        #lg2{position:absolute}
        .animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}
        @-webkit-keyframes bounceIn {
            0% {opacity: 0;-webkit-transform: scale(.3);}
            50% {opacity: 1;-webkit-transform: scale(1.05);}
            70% {-webkit-transform: scale(.9);}
            100% {-webkit-transform: scale(1);}}
        @keyframes bounceIn {
            0% {opacity: 0;transform: scale(.3);}
            50% {opacity: 1;transform: scale(1.05);}
            70% {transform: scale(.9);}
            100% {transform: scale(1);}}
        .bounceIn {-webkit-animation-name: bounceIn;animation-name: bounceIn;}
    </style>
  </head>
  <body>
  <table><tbody><tr><td>
    <div id="lh" class="animated bounceIn"><div id="lh2"><div id="lh3">
      <img src="/img/special/soul.png" id="lg2" width="150" height="150" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); -moz-border-radius: 75px; -webkit-border-radius: 75px; -o-border-radius: 75px; border-radius: 75px; vertical-align: bottom;" />
    </div></div></div>
  </td></tr></tbody></table>
  </body>
</html>


Хаки и трюки	Виртуалки	Сис^ьадминство	BASH-скрипты
Парусные суда	Праздники	Моё чтиво	Игра KSP

Ваш пароль

Блог ни о чём

Упругость