PDA

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



nazano
12th December 2014, 01:15 AM
در طراحی سایت (http://www.webwe.ir/) با به کارگیری کدهای زبان CSS3 شما به راحتی می توانید متحرک سازی به وجود آورد. توجه داشته باشید که CSS3 امکانات ویژه ای را برای بهینه سازی سایت (http://www.webwe.ir/) فراهم می کند که در این راستا شما با استفاده از کدهای CSS3 در وب سایت خویش قادر خواهید بود افکت های متحرک سازی با سرعت بالا ایجاد کنید. اما باید توجه داشته باشید که مرورگرهایی که دارای نسخه های پایین تری هستند این قابلیت را پشتیبانی نمی کنند.


معین کردن استایل های متفاوت در طراحی سایت شما را قادر می سازند تا بتوانید از طریق تغییر و مرجع دهی به استایل های مختلف گونه ای حرکت کردن را در طراحی سایت (http://www.webwe.ir/) خود به وجود آورید. در زیر برایتان نمونه ای از چگونگی جاسازی کدهای CSS3 را در تگ div نشان داده ایم.





div {


-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */


animation: myfirst 5s;


}


/* Chrome, Safari, Opera */


@-webkit-keyframes myfirst {


from {background: red;}


to {background: yellow;}


}


/* Standard syntax */


@keyframes myfirst {


from {background: red;}


to {background: yellow;}


}


همانطور که در بالا گفته شد شما هر وقت بخواهید به راحتی می توانید در بین استایل های مختلفی که ایجاد کرده اید تغییر و جابجایی بدهید و نحوه کار هم خیلی آسان است فقط کافی است که از ویژگی های درصد یا از کلمه کلیدی "from" و "to" این کار را به اجرا در آورید. در زیر نمونه ای از به کارگیری ویژگی درصد را ببیند.


/* Chrome, Safari, Opera */


@-webkit-keyframes myfirst {


0% {background: red;}


25% {background: yellow;}


50% {background: blue;}


100% {background: green;}


}


/* Standard syntax */


@keyframes myfirst {


0% {background: red;}


25% {background: yellow;}


50% {background: blue;}


100% {background: green;}


}


دیدید کار خیلی راحت است، شما توانستید با استفاده از کدهای CSS3 در طراحی سایت خویش جلوه ها و نماهای بسیار زیبایی را که دارای سرعت بالایی هم هستند ایجاد کنید که این کار هم باعث توجه نظر کاربر (کاربرپسند) می شود و هم در بهینه سازی سایت (http://www.webwe.ir/) شما نقش مهمی را بازی می کند.



منبع سایت طراحی سایت آلپ نت - وب وی (http://www.webwe.ir/)

استفاده از تمامی مطالب سایت تنها با ذکر منبع آن به نام سایت علمی نخبگان جوان و ذکر آدرس سایت مجاز است

استفاده از نام و برند نخبگان جوان به هر نحو توسط سایر سایت ها ممنوع بوده و پیگرد قانونی دارد