CSS3 仿古墓丽影9菜单界面

本文链接：https://blog.csdn.net/a753255157/article/details/50361902

CSS3和JQuery初学乍练，看着古墓9的界面挺炫，粗略仿制了一个，也暂没做兼容。话说Chrome和IE11的抗锯齿能力挺好，火狐就弱爆了。另外截止火狐43，IE11，貌似都不支持translateZ变化，所以只有在Chrome上才能看到效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@keyframes boxRotate{
	0%{transform:rotateY(-15deg) rotateX(-15deg);}
	25%{transform:rotateY(15deg) rotateX(-15deg);}
	50%{transform:rotateY(15deg) rotateX(15deg);}
	75%{transform:rotateY(-15deg) rotateX(15deg);}
	100%{transform:rotateY(-15deg) rotateX(-15deg);}
}
@keyframes imgTransIn{
	0%{transform:translateZ(700px); opacity:0;}
	100%{transform:translateZ(0px); opacity:1; display:block;}
}
@keyframes imgTransOut{
	0%{transform:translateZ(0px); opacity:1;}
	100%{transform:translateZ(700px); opacity:0; display:none;}
}
#box{
	width:850px;
	height:420px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-430px;
	margin-top:-210px;
	perspective-origin:center;
	perspective:1000px;
}
#container{
	width:100%;
	height:100%;
	border:1px solid #CCC;
	transform-style:preserve-3d;
	animation:boxRotate 50s infinite linear;
	box-shadow:2px 2px 20px #DDD;
}
#img_box{
	width:320px;
	height:200px;
	position:absolute;
	top:10px;
	left:200px;
}
#img_box>img{
	/*图片16:10*/
	max-width:640px;
	max-height:400px;
	position:absolute;
	top:0px;
	left:0px;
}
#list_div{
	position:absolute;
	left:0px;
	top:10px;
}
#list_ul{
	padding:0px;
	margin:0px;
}
#list_ul>li{
	list-style:none;
	color:#555;
	font-size:20px;
	line-height:40px;
	display:block;
	height:40px;
	width:180px;
	padding-left:10px;
}
#list_ul>li:hover{
	background-color:#9797FF;
	color:#FFF;
}
hr{
	transform:rotate(270deg);
	width:400px;
	position:absolute;
	left:-10px;
	top:202px;
}
</style>
</head>
<body>
<div id="box">
    <div id="container">
        <div id="list_div">
            <ul id="list_ul">
                <li>图片一</li>
                <li>图片二</li>
                <li>图片三</li>
                <li>图片四</li>
            </ul>
        </div>
        <hr>
        <div id="img_box">
            <img src="http://imgsrc.baidu.com/forum/pic/item/3f107eec54e736d1255452249a504fc2d5626971.jpg" id="img4">
            <img src="http://imgsrc.baidu.com/forum/pic/item/560d76f082025aafddb3a0e7faedab64034f1a33.jpg" id="img3">
            <img src="http://imgsrc.baidu.com/forum/pic/item/284ff6deb48f8c548f3b1c033b292df5e1fe7fd4.jpg" id="img2">
            <img src="http://imgsrc.baidu.com/forum/pic/item/bd99ec50352ac65cf65cbd5ffaf2b21193138a64.jpg" id="img1">
        </div>
    </div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var i=1;
function ani_in(j,n)
{
	for(j,k=0;j>=n;j--,k++)
	{
		$("#img"+j).delay(80*k).css({
			'animation':'imgTransIn 0.4s cubic-bezier(0.76, 0.01, 0.24, 0.9)',
			'animation-fill-mode':'forwards'
		});
	}
}
function ani_out(j,n)
{
	for(j,k=0;j<=n;j++,k++)
	{
		$("#img"+j).delay(80*k).css({
			'animation':'imgTransOut 0.4s cubic-bezier(0.29, 0.18, 0.43, 0.85)',
			'animation-fill-mode':'forwards'
		});
	}
}
$("#list_ul li:nth-child(1)").mouseenter(function(){
	if(i>1)
	{
		ani_in(i,1);
	}
	i=1;
});
$("#list_ul li:nth-child(2)").mouseenter(function(e) {
	if(i>2)
	{
		ani_in(i,2);
	}
	else if(i<2)
	{
		ani_out(i,1);
	}
	i=2;
});
$("#list_ul li:nth-child(3)").mouseenter(function(e) {
	if(i>3)
	{
		ani_in(i,3);
	}
	else if(i<3)
	{
		ani_out(i,2);
	}
	i=3;
});
$("#list_ul li:nth-child(4)").mouseenter(function(e) {
	ani_out(i,3);
	i=4;
});
</script>
</body>
</html>