Эффект анимации картинки CSS

Приветствую всех, кто читает сейчас шпаргалки блогерши. Что-то давненько я не писала про удивительные эффекты CSS. Последний раз мы делали красивое анимированное меню. Для тех, кто пропустил эту информацию почитайте здесь. Сегодня  хочу предложить ещё один вариант, но уже более сложной анимации.

Да что ходить вокруг да около. Подведите курсор на картинку. Ух ты!!! Улетела!!! Держи её!!!

Чтобы сделать такой эффект анимации нам понадобится 2 картинки. Первая это само фоновое изображение (её URL). И второе, это картинка с тем, что у нас полетит и вернётся на место. Её нужно взять в формате png.

Для начала мы пропишем вот такой код. В нём, то что выделено синим и будет адрес нашей второй картинки. В данном случае-бабочки.

Код

<div id="outerspace">
    <div class=" babocka">
        <div>
            <img src=" http://galerey-room.ru/images/041616_1385342176.png" width="52" height="115" alt=" бабочка" />
        </div>
    </div>
</div>

А сейчас понадобится вот такой код CSS. Здесь в строку, выделенную синим цветом вставляем адрес фонового изображения.

<style>#outerspace {
    position: relative;
    height: 280px;
    width:364px;
    background: #00bfff url("http://festival.1september.ru/articles/587564/img4.jpg");
 
    -webkit-transition: 3s ease-in;
    -moz-transition: 3s ease-in;
    -o-transition: 3s ease-in;
    transition: 3s ease-in;
}
#outerspace:hover {
    background-position:50% top;
}
div.babocka div {
    position: absolute;
    bottom: 10px;
    left: 20px;

    -webkit-transition: 3s ease-in;
    -moz-transition: 3s ease-in;
    -o-transition: 3s ease-in;
    transition: 3s ease-in;
}
div.babocka div img {
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
}
#outerspace:hover div.babocka div {
    -webkit-transform: translate(645px,-280px);
    -moz-transform: translate(645px,-280px);
    -o-transform: translate(645px,-280px);
    -ms-transform: translate(645px,-280px);
    transform: translate(645px,-280px);
}
#outerspace:hover div.babocka div img {
    -webkit-transform: rotate(56deg);
    -moz-transform: rotate(56deg);
    -o-transform: rotate(56deg);
    -ms-transform: rotate(56deg);
    transform: rotate(56deg);
    width:30px;
    height:70px;
}</style>

Расписывать всю эту конструкцию я не буду. Вот источник http://www.sitehere.ru/. Кого это заинтересовала, там всё по полочкам разобрано. Да и ещё много всего интересного. Я только поменяла некоторые параметры на свои.

Чтобы разместить в сообщении такую красоту нужно при написании поста перейти в режим HTML и в том месте, где у нас будет эта картинка вставить первый код. Ну и где-нибудь в конце сообщения код CSS. Подробно об этом я писала здесь.

 Попробуйте поиграться и создать для себя свою анимацию. Ведь заставить полетать таким способом можно что угодно и кого угодно. Самолёт, шарики, ракеты, Бабу Ягу и т.д.  Порадуйте таким эффектом и себя и своих читателей.

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

Введите Ваш email ...: