* { margin:0; padding:0; list-style:none; } #Frame { width:460px; height:380px; border:0px solid black; position:absolute; left:50%; top:50%; margin-left:-230px; margin-top:-190px; } .menu1,.menu2,.menu3,.menu4 { width:275px; height:95px; border-right:1px solid black; } .font1,.font2 { width:100%; height:45px; border:0px solid black; text-align:right; } .font1 { font-size:14px; color:#009; } .font2 { font-size:23px; color:#000; font-weight:bold; } .menu1:hover { background:#b43e3e; } .menu2:hover { background:#d8da5d; } .menu3:hover { background:#d98d42; } .menu4:hover { background:#c4a8a4; } .menu1:hover .font2 { color:#fff; } .menu2:hover .font2 { color:#fff; } .menu3:hover .font2 { color:#fff; } .menu4:hover .font2 { color:#fff; } img { position:absolute; left:0; top:0; z-index:-20; opacity:0; transition:5s all ease; } .menu1:hover+img { transform:translate(275px,0px); opacity:1; } .menu2:hover+img { transform:translate(275px,0px); opacity:1; } .menu3:hover+img { transform:translate(275px,0px); opacity:1; } .menu4:hover+img { transform:translate(275px,0px); opacity:1; }
纯css特效菜单