CSS анимационни ефекти на изображения

Поздрави, приятели. Поздрави на вас, които сега четете Блог за блогове. Отдавна не съм ви припомняла за удивителните ефекти на CSS. Последния път направихме красиво анимирано меню. За тези, които са пропуснали тази информация, прочетете тук.
Днес искам да предложа друг вариант, но на по-сложна анимация.

Преместете курсора върху изображението. Уау !!! Отлетя! Хванете го!

За да направим този анимационен ефект се нуждаем от 2 изображения. Първото е фоновото изображение (неговия URL). И второто е изображението на това, което ще накараме да полети и после ще го върнем на мястото му. То трябва да бъде в png формат.
Като начало прописваме този код.

<div id="outerspace">
    <div class=" balon">
        <div>
            <img src="https://lh3.googleusercontent.com/-8xscztafPQA/XMu8bxuohBI/AAAAAAAAKDc/Zr7NYBlOiVUPkdU8xKAl21Rl4U7MeKh7wCLcBGAs/h120/sharik.png" width="52" height="115" alt="балон" />
        </div>
    </div>
</div>

В него, това, което е маркирано в синьо е адресът на второто изображение. В нашия случай е балонът.
И сега имаме нужда от този CSS код. Тук в реда, маркиран със синьо, е вписан адресът на първото, фоновото изображение.

CSS код

<style>#outerspace {
    position: relative;
    height:216px;
    width:385px;
    background: #00bfff url("https://lh3.googleusercontent.com/-S-vu_E3S4RM/XMu8Q6eocbI/AAAAAAAAKDY/rmC33tYShG4Sh5_pClHk-UeZO_Wd0Gp1ACLcBGAs/h120/poleteli1.orig.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>

За да имате подобен красив ефект в публикацията си, когато я пишете, преминете в HTML режим и на мястото, където ще бъде изображението, вмъкнете първия код. А в края на публикацията впишете CSS кода.
Опитайте се да осъществите този ефект, поиграйте си, за да създавате своя собствена анимация. В края на краищата, можете да принудите всичко да лети по този начин. Самолет, топка, ракета, Баба Яга или друго, каквото си поискате.
Зарадвайте с такъв ефект и себе си, и вашите читатели.

Ще съм благодарна ако оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: Или гласувайте за блога на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!