图片滚动代码加图片旋转css【原创

来源:https://www.sucaihuo.com/js/3024.html 2017-09-17 19:55浏览(1011) 收藏

css3简单很好用的图片旋转rotate代码,支持图片滚动,鼠标滑过可旋转,css3 图片旋转360度
图片滚动代码加图片旋转css
分类:图片代码 > 图片轮播 难易:入门级
查看演示 下载资源: 5 下载资源 下载积分: 15 积分
<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>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/3024.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

1 2