css3之3d导航
css3的新屬性非常不錯，目前IE除外其他瀏覽器都已支持
實現(xiàn)原理:比如元素a在hover時候可以改變元素b的狀態(tài)。
效果如本農(nóng)導(dǎo)航，歡迎采用和建議~
a:hover b{?
? 執(zhí)行簡單動畫效果
}
HTML
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>3D-navBar</title><link rel="stylesheet" href="css/3dnavBar.css"> </head> <body> <header><ul class="block-menu" id="F1"><li><a href="javascript:;" class="three-d">Home<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span></a></li><li><a href="javascript:;" class="three-d">Html<span class="three-d-box"><span class="front">Html</span><span class="back">Html</span></span></a></li><li><a href="javascript:;" class="three-d">CSS<span class="three-d-box"><span class="front">CSS</span><span class="back">CSS</span></span></a></li><li><a href="javascript:;" class="three-d">Javascript<span class="three-d-box"><span class="front">Javascript</span><span class="back">Javascript</span></span></a></li><li><a href="javascript:;" class="three-d">jQuery<span class="three-d-box"><span class="front">jQuery</span><span class="back">jQuery</span></span></a></li><li><a href="javascript:;" class="three-d">ajax<span class="three-d-box"><span class="front">ajax</span><span class="back">ajax</span></span></a></li><li><a href="javascript:;" class="three-d">php<span class="three-d-box"><span class="front">php</span><span class="back">php</span></span></a></li><li><a href="javascript:;" class="three-d">bootstrap<span class="three-d-box"><span class="front">bootstrap</span><span class="back">bootstrap</span></span></a></li><li><a href="javascript:;" class="three-d">angular<span class="three-d-box"><span class="front">angular</span><span class="back">angular</span></span></a></li></ul> </header> </body> </html>CSS
*{list-style: none;margin: 0;padding: 0; } .block-menu{background:#AA7A53;height:50px;overflow:hidden;padding-left:40px; } .block-menu li{float: left;margin-left: 15px; } .block-menu li a{color:#fff;text-decoration:none;text-transform:uppercase;font-size:16px;line-height:20px;font-weight:bold;font-family: Arial, sans-serif;display:block;padding:15px 10px; } .three-d-box,.front,.back{width: 100%;display: block;height:50px;position:absolute;top:0;left:0;text-align: center;line-height: 50px;background:#AA7A53; } .three-d{perspective:200px;position:relative; } .three-d-box{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(-25px);-moz-transform:translateZ(-25px);-o-transform:translateZ(-25px);-ms-transform:translateZ(-25px);transform:translateZ(-25px);-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out; } .front{-webkit-transform:rotateX(0deg) translateZ(25px);-moz-transform:rotateX(0deg) translateZ(25px);-o-transform:rotateX(0deg) translateZ(25px);-ms-transform:rotateX(0deg) translateZ(25px);transform:rotateX(0deg) translateZ(25px); } .back{-webkit-transform:rotateX(-90deg) translateZ(25px);-moz-transform:rotateX(-90deg) translateZ(25px);-o-transform:rotateX(-90deg) translateZ(25px);-ms-transform:rotateX(-90deg) translateZ(25px);transform:rotateX(-90deg) translateZ(25px); } .three-d:hover .three-d-box{-webkit-transform: translateZ(-25px) rotateX(90deg);-moz-transform: translateZ(-25px) rotateX(90deg);-o-transform: translateZ(-25px) rotateX(90deg);-ms-transform: translateZ(-25px) rotateX(90deg);transform: translateZ(-25px) rotateX(90deg); }總結(jié)
- 上一篇： Eclipse OSGi调试过程
- 下一篇： 信息安全系统设计基础第二次实验