您的位置：首页 > Web前端 > CSS

CSS3 仿古墓丽影9菜单界面

2015-12-20 01:53 453 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航