PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : اموزش اختصاصی ساخت ( لوگوی متحرک تویتر )



Foutch
2013/03/04, 12:54 AM
سلام دوستان امروز با یک اموزش متفاوت درخدمتتون هستم ، امروز میخوام بهتون اموزش بدم که میشه به راحتی با استفاده از چند تا Keyframes و Transition یک انمیشن متحرک و کارامد ساخت ،خوب شروع میکنم :

قدم اول :


<div class="vbiran"> <div class="twitter-bird"></div></div>

یک div تعریف کردیم و نام vbiran رو به کلاس اختصاص دادیم و یک div دیگه ( div متداخل ) در دل div اولی تعریف کردیم و نام کلاس اون رو twitter-brid قرار دادیم ، حالا میرم سراغ استایل دهی (CSS) :


body { height: 100%;
margin: 0;
padding: 0;
position: relative;
}

قدم دوم :

برای کل صفحه یک استایل تعریف کردیم و بعد :


.vbiran { display: inline-block;
float: center;
height: 240px;
margin: -120px 0 0;
padding: 0;
position: relative;
text-align: center;
top: 50%;
width: 33.33%;
}

برای div مورد نظر هم (vbiran) استایل تعریف کردیم و بعد از اون میرم سراغ استایل دهی به div متداخل (twitter-bird):


/* Twitter Bird */
.twitter-bird {
background-image:url(http://up.vbiran.ir/uploads/136234457312321_0twitter-bird-sprite.png);
cursor: pointer;
display: inline-block;
height: 150px;
margin: 50px -30% 0 0;
width: 150px;
}


.twitter-bird:hover {
-webkit-animation: fly 0.2s steps(3) 0 infinite;
-moz-animation: fly 0.2s steps(3) 0 infinite;
animation: fly 0.2s steps(3) 0 infinite;
}

برای این قسمت باید عکسی که به صورت sprite کمباین شده رو دانلود (http://up.vbiran.ir/uploads/136234457312321_0twitter-bird-sprite.png) کنید ، براتون اخر اموزش اپلود کردم ! | اینم از این ، تا اینجا تصویر پرنده ی ما هیچ حرکتی نمیکنه و فقط نمایش داده میشه ولی بعد از این با چند تا keyframe پرواز میکنه :


@-webkit-keyframes fly {
from { background-position: 0 0; }
to { background-position: -450px 0; }
}
@-moz-keyframes fly {
from { background-position: 0 0; }
to { background-position: -450px 0; }
}
@keyframes fly {
from { background-position: 0 0; }
to { background-position: -450px 0; }
}


http://up.vbiran.ir/uploads/136234457312321_0twitter-bird-sprite.png
و در اخر کد کامل :


body {
height: 100%;
margin: 0;
padding: 0;
position: relative;
}




.vbiran {
display: inline-block;
float: center;
height: 240px;
margin: -120px 0 0;
padding: 0;
position: relative;
text-align: center;
top: 50%;
width: 33.33%;
}




/* Twitter Bird */
.twitter-bird {
background-image:url(http://up.vbiran.ir/uploads/136234457312321_0twitter-bird-sprite.png);
cursor: pointer;
display: inline-block;
height: 150px;
margin: 50px -30% 0 0;
width: 150px;
}


.twitter-bird:hover {
-webkit-animation: fly 0.2s steps(3) 0 infinite;
-moz-animation: fly 0.2s steps(3) 0 infinite;
animation: fly 0.2s steps(3) 0 infinite;
}


@-webkit-keyframes fly {
from { background-position: 0 0; }
to { background-position: -450px 0; }
}
@-moz-keyframes fly {
from { background-position: 0 0; }
to { background-position: -450px 0; }
}
@keyframes fly {
from { background-position: 0 0; }
to { background-position: -450px 0; }
}

خوب کار ما تموم شد ، پرنده ی ما اماده ی پرواز است | امیدوارم از این اموزش لذت برده باشید

mahtabdl
2013/03/08, 10:09 PM
دوست عزیز ، کار نکرد!

Foutch
2013/03/08, 10:35 PM
دوست عزیز این لوگو روی مروگر های IE کار نمیکنه !

arsamari91
2013/03/17, 01:55 PM
:-bd مرسیییییی

shervin.s
2014/05/17, 06:43 PM
سلام تو کروم کار میکنه ولی تو فایرفاکس کار نمیکنه چرا؟