CSS3 仿古墓丽影9菜单界面

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>

CSS3 仿古墓丽影9菜单界面相关推荐

11.菜单界面、详情界面
菜单界面在MainActivity 的initView方法里 // 添加菜单 fl_menu=(FrameLayout) findViewById(R.id.fl_menu); MenuHolde ...
css3制作左右拉伸动画菜单
微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...
php简单网页制作代码,用HTML和CSS以及JS制作简单的网页菜单界面的代码
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下写ABROAD项目用到了标签这个东东,其实标 ...
处理2D图像和纹理——创建2D菜单界面
问题你想创建一个2D菜单界面,让你可以容易地添加新的菜单和指定它们的菜单选项.这个菜单允许用户使用控制器/键盘切换不同的选项和菜单,当用户从一个菜单切换到另一个菜单时还可以定义漂亮的过渡效果. 解决 ...
fifa15服务器位置,《FIFA 15》系统菜单界面图文详解各游戏模式详解
从<FIFA14>开始,FIFA的主菜单界面就以类似windows系统的磁贴(贴齐)姿态示人.这种方式美观而且将资讯尽收眼底,因为划时代的<FIFA>不仅具备游戏功能,它还具备 ...
Linux - 可视化菜单界面设计
优化屏幕刷新问题刷新多个窗体需要一些繁琐,在一个慢速的链接上,屏幕的绘制相当的慢目标就是要尽量减少要在屏幕上的绘制的字符数基本函数 int wnoutrefresh(WINDOW *windo ...
设置Firefox（火狐）浏览器的中文菜单/界面
步骤一: 设置Firefox浏览器的中文菜单/界面.首先需要查一下正在使用的火狐版本号(小生使用的火狐版本是55.0.3). 步骤二: 下载对应版本的xpi中文插件其次,访问下面的火狐官方 ...
unity期末作业-贪吃蛇游戏有菜单界面有背景音乐
unity期末作业-贪吃蛇游戏有菜单界面有背景音乐游戏如下动态图: 点我下载 https://download.csdn.net/download/weixin_43474701/75853708
应用代码(2)——（UC1701液晶显示屏）菜单界面模板
最近开始接触工控领域了.以前没有接触过显示屏跳转的代码,自己精简整理了一下了,可以作为一个菜单界面的显示模板使用. 1)模板介绍 ^1 硬件: [1]6个按键:向上按键.向下按键.确认按键.返回按键. ...

CSS3 仿古墓丽影9菜单界面

CSS3 仿古墓丽影9菜单界面相关推荐

最新文章

热门文章