Бесконечно вращающаяся картинка.

Привет друзья. Сегодня опять  эффект для картинки. Смотрите, как можно сделать бесконечно вращающуюся картинку, используя стили CSS. Где это можно применить, решите сами. С помощью подобного кода можно заставить вертеться любое изображение.  Единственное, что формат его должен быть PNG.


Код можно вставить и в тело сообщения, и гаджет HTML/JavaScript. А вот и сам эффект.

А это код для него.

<style>.coleso {
     -webkit-animation-name: spin;
    -webkit-animation-duration: 15000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 15000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 15000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
    }</style>

<img class="coleso" height="320" src=" адрес картинки " width="320" />

15000ms-это скорость вращения, можно менять на свою. И пусть у всех голова идёт кругом.

Хороших всем выходных и последних летних денёчков. До встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email