
Днес искам да предложа друг вариант, но на по-сложна анимация.

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

За да направим този анимационен ефект се нуждаем от 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>
<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>
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 кода.
Опитайте се да осъществите този ефект, поиграйте си, за да създавате своя собствена анимация. В края на краищата, можете да принудите всичко да лети по този начин. Самолет, топка, ракета, Баба Яга или друго, каквото си поискате.
Зарадвайте с такъв ефект и себе си, и вашите читатели.
Ще съм благодарна ако оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: Или гласувайте за блога на:

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