提示：您可以先修改部分代碼再運行
<!DOCTYPE html><html><head><meta charset=utf-8 /><meta name="description" content="description"> <title>Miracle's blog - 動畫導航</title> <sytle>/*welcome to Miracle's blog*/* { margin: 0; padding: 0;}body { background: #333;}/*HEADER*/.header { height: 25px; background: #222; color: #eee; text-align: center; font: 10px/25px "Microsoft Yahei",Helvetica, Verdana, sans-serif; }.header a { color: #999;}/*CONTAINER*/.container { position: relative; overflow: hidden; margin: 100px auto; width: 800px; height: 500px; -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3); box-shadow: 10px 10px 10px rgba(0,0,0,0.3);}.container img { position: absolute; top: 0; left: 0; z-index: -60;}.container li img { position: absolute; top: 0; left: 800px; z-index: -50; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;}/*NAV*/nav { width: 170px; height: 500px; background: #fff;}nav h1 { padding: 20px; color: #ccc; text-align: right; font: 25px "Microsoft Yahei",Georgia, Times, serif;}/*UL*/ul { width: 800px; height: 500px; list-style: none;}li a { z-index: 1; display: block; padding-left: 20px; width: 150px; height: 30px; background: white; color: #444; text-decoration: none; font: 14px/30px "Microsoft Yahei",Helvetica, Verdana, sans-serif;}li:nth-child(1) { padding-top: 50px;}li a:hover { background: #eee;}li a:hover + img { left: 0px;}</style> </head> <body> <div class="header">CSS 導航背景動畫切換 - </div> <div class="container"> <nav> <h1>Miracle's blog</h1> <ul> <li> Home </li> <li> About </li> <li> Clients </li> <li> Work </li> <li> Contact </li> </ul> </nav> </div> </body></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
