رفتن به مطلب

آموزش چرخش یک عکس دائمی ( انمیشین اتوماتیک دائمی )


پست های پیشنهاد شده

سلام دوستان . در این آموزش می خوام بگم چجور یه عکس رو تویه صفحه با لود شدن صفحه اتوماتیک بچرخونین به صورت دائمی .

کد استایل


@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}

@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}

@-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}

#raysDemoHolder {
position: relative;
width: 47px;
height: 47px;
}
#rays {
background: url(http://aseman.xzn.ir/wp-content/uploads/2015/01/gear.png) 0 0 no-repeat;
position: absolute;
margin:px 0px 0px 0px;
width: 47px;
height: 47px;
-webkit-animation-name: spin;
-webkit-animation-duration: 10000ms; /* 40 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

-moz-animation-name: spin;
-moz-animation-duration: 10000ms; /* 40 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

-ms-animation-name: spin;
-ms-animation-duration: 10000ms; /* 40 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;

/* boooo opera */
-o-transition: rotate(3600deg); /* works */
}

#rays:hover {
/* -webkit-animation-duration: 10000ms; 10 seconds - speed it up on hover! */
}

حالا در آدرس بالا در background:url آدرس عکس خودتون رو وارد کرده و با کدهای زیر فرواخوانیش کنین !


<div id="raysDemoHolder">
<div id="rays"></div>
</div>

نمونه آنلاین

کلیک کنید !

لینک به ارسال

در تاپیک زیر توضیح دادید دیگه نیاز به زدن تاپیک نبود عزیز :

موفق باشید

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...