图片轮流翻转，一直循环

我们的游戏官网，一般都需要一些动画效果，这里的动画是图标一直轮流翻转，每隔1秒翻转一次，下面是我的代码

<div>
	<img src="img/HBuilder.png" />
	<img src="img/HBuilder.png" />
	<img src="img/HBuilder.png"/>
</div>

.img5{
        	 box-shadow: 0 0 10px #9AFE2E;
		    animation: rotate-x 0.4s;
		    -moz-animation: rotate-x 0.4s;  /* Firefox */
		    -webkit-animation: rotate-x 0.4s;   /* Safari 和 Chrome */
		    -o-animation: rotate-x 0.4s;    /* Opera */
        }
        @keyframes rotate-x {
		    50% {
		        transform: scaleX(0);
		    }
		    100% {
		        transform: scaleX(1);
		    }
		}
		/*  IE  */
		@-ms-keyframes rotate-x {
		    50% {
		        -ms-transform: scaleX(0);
		    }
		    100% {
		        -ms-transform: scaleX(1);
		    }
		}
		/* Safari and Chrome*/
		@-webkit-keyframes rotate-x {
		    50% {
		        -webkit-transform: scaleX(0);
		    }
		    100% {
		        -webkit-transform: scaleX(1);
		    }
		}
		/* Firefox  */
		@-moz-keyframes rotate-x {
		    50% {
		        -moz-transform: scaleX(0);
		    }
		    100% {
		        -moz-transform: scaleX(1);
		    }
		}
		/*  Opera  */
		@-o-keyframes rotate-x {
		    50% {
		        -o-transform: scaleX(0);
		    }
		    100% {
		        -o-transform: scaleX(1);
		    }
		}

　　

这里把一些常用的浏览器的兼容也写了，当然，css只是表现，要让它轮流的额动起来还要有js的配合

var imgs = $('img');
    var len = imgs.size();//或者用imgs.length;
    var count = 0;
    function overturn(){
        var i = count % len;
        imgs.removeClass('img5');
        imgs.eq(i).addClass('img5');
        count ++;        
    }
    setInterval("overturn()",1000);

好啦，到这里，就愉快的完成啦，不信你试试