你的位置:首页 > 软件开发 > 网页设计 > css3之3d导航

css3之3d导航

发布时间:2016-05-12 14:00:14
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

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。