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

[بویکا 124]

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

کد استایل

@-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>

نمونه آنلاین

کلیک کنید !

[Black_Sky 6349]

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

موفق باشید