底部菜单3d特效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我是可移动的  </title>
	<style type="text/css">
		*{margin: 0px; padding: 0px;}
		#foot{
		    bottom: 0px;
			position: absolute;
    z-index: 3002;
    overflow: visible;
    opacity: 1;
    cursor: default;
    pointer-events: none;
    background-image: url(../img/ui.png);
    background-repeat: repeat-x;
  /*   background: url(../img/ui.png) repeat-x ;*/
    
    width: 70px;
    height: 149px;
    background-position: 0px -140px;
   /* background-size: 1000px 400px;27.3986*/
    transform: translateZ(1e+12px) translate(0px, 0px) translate(-35px, -74.5px) scale(13.9992, 1) translate(35px, 74.5px) translate(0px, 74.5px) rotate(0deg) translate(0px, -74.5px);
  /*  overflow:hidden;*/

}
		 
	</style>
	<script type="text/javascript">
	window.onload = function(){
		var Iwidth = document.body.offsetWidth ;
		alert(Iwidth);		  
		var IHeight = window.screen.height ;
		alert(Iwidth +"搞事"+ IHeight);
        console.log(Iwidth +"搞事"+ IHeight);
		var s = document.title.split('');//console.log(s);获取并将tittle截成数组；
    //封装“滚动函数”
    function loop() {
        s.push(s[0]);//在数组的最后一位推入第一位；
        s.shift();//删除第一位；
        document.title = s.join('');//拼成字符串再赋值给tittle；
    }
    setInterval(loop, 500);//开定时器，实现“滚动效果”
	}
 	//封装“滚动函数”
	</script>
</head>
<body>
 
	<div id="foot" ></div>
</body>
</html>
这个是经过3d变形的雪碧图上的小图片
猜你喜欢
