CSS3 仿古墓丽影9菜单界面

来源：互联网发布：工具箱知乎编辑：程序博客网时间：2024/04/30 17:39

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>

0 0