css3简单很好用的图片旋转rotate代码,支持图片滚动,鼠标滑过可旋转,css3 图片旋转360度
<style>
img{
height:150px;
width:150px;
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
}
img:hover{
height:250px;
width:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
}
img{
transition: 1s;
}
*{ margin:0; padding:0; list-style:none;}
#box{ width:840px; border:0px solid #000; height:250px; margin:30px auto; position:relative; overflow:hidden;}
#box ul{ position:absolute; left:0; top:0;}
#box ul li{ width:150px; height:150px; float:left; padding:5px;}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oUl=oBox.children[0];
var aLi=oUl.children;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
setInterval(function(){
var l=oUl.offsetLeft+10;
if(l>=0){
l=-oUl.offsetWidth/2;
}
oUl.style.left=l+'px';
},120);
};
</script>
<div id="box">
<ul>
<li><img src="http://qiuxianrenren.com/uploads/image/20170916/8e57890b8b3adf79baeea69d7626287a.gif"></li>
<li><img src="http://qiuxianrenren.com/uploads/image/20170916/f8f035585d5cbd67aeca54d9cc1db863.gif"></li>
<li><img src="http://qiuxianrenren.com.com/uploads/image/20170916/151e976b12fb25fa2b3280f05afa856c.gif"></li>
<li><img src="http://qiuxianrenren.com.com/uploads/image/20170916/f8f035585d5cbd67aeca54d9cc1db863.gif"></li>
<li><img src="http://qiuxianrenren.com.com/uploads/image/20170916/151e976b12fb25fa2b3280f05afa856c.gif"></li>
</ul>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791