css3的新属性非常不错,目前IE除外其他浏览器都已支持实现原理:比如元素a在hover时候可以改变元素b的状态。效果如本农导航,欢迎采用和建议~a:hover b{ 执行简单动画效果}HTML<!DOCTYPE html><html lang=&q ...
css3的新属性非常不错,目前IE除外其他浏览器都已支持
实现原理:比如元素a在hover时候可以改变元素b的状态。
效果如本农导航,欢迎采用和建议~
a:hover b{
执行简单动画效果
}
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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:css3之3d导航
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。