请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

切换风格 注册 找回密码

html5源码-html5教程网


查看: 2097|回复: 15

css3之3d导航

[复制链接]

1

主题

0

听众

50

积分

注册会员

Rank: 2

贡献
0
金钱
1
发表于 2016-5-12 16:48:09 |显示全部楼层
css3的新属性非常不错,目前IE除外其他浏览器都已支持
实现原理:比如元素a在hover时候可以改变元素b的状态。
效果如本农导航,欢迎采用和建议~
a:hover b{
  执行简单动画效果
}
HTML
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>3D-navBar</title>
  6.     <link rel="stylesheet" href="css/3dnavBar.css">
  7. </head>
  8. <body>
  9. <header>
  10.     <ul class="block-menu" id="F1">
  11.         <li>
  12.             <a href="javascript:;" class="three-d">Home
  13.                 <span class="three-d-box">
  14.                     <span class="front">Home</span>
  15.                     <span class="back">Home</span>
  16.                 </span>
  17.             </a>
  18.         </li>
  19.         <li>
  20.             <a href="javascript:;" class="three-d">Html
  21.                 <span class="three-d-box">
  22.                     <span class="front">Html</span>
  23.                     <span class="back">Html</span>
  24.                 </span>
  25.             </a>
  26.         </li>
  27.         <li>
  28.             <a href="javascript:;" class="three-d">CSS
  29.                 <span class="three-d-box">
  30.                     <span class="front">CSS</span>
  31.                     <span class="back">CSS</span>
  32.                 </span>
  33.             </a>
  34.         </li>
  35.         <li>
  36.             <a href="javascript:;" class="three-d">Javascript
  37.                 <span class="three-d-box">
  38.                     <span class="front">Javascript</span>
  39.                     <span class="back">Javascript</span>
  40.                 </span>
  41.             </a>
  42.         </li>
  43.         <li>
  44.             <a href="javascript:;" class="three-d">jQuery
  45.                 <span class="three-d-box">
  46.                     <span class="front">jQuery</span>
  47.                     <span class="back">jQuery</span>
  48.                 </span>
  49.             </a>
  50.         </li>
  51.         <li>
  52.             <a href="javascript:;" class="three-d">ajax
  53.                 <span class="three-d-box">
  54.                     <span class="front">ajax</span>
  55.                     <span class="back">ajax</span>
  56.                 </span>
  57.             </a>
  58.         </li>
  59.         <li>
  60.             <a href="javascript:;" class="three-d">php
  61.                 <span class="three-d-box">
  62.                     <span class="front">php</span>
  63.                     <span class="back">php</span>
  64.                 </span>
  65.             </a>
  66.         </li>
  67.         <li>
  68.             <a href="javascript:;" class="three-d">bootstrap
  69.                 <span class="three-d-box">
  70.                     <span class="front">bootstrap</span>
  71.                     <span class="back">bootstrap</span>
  72.                 </span>
  73.             </a>
  74.         </li>
  75.         <li>
  76.             <a href="javascript:;" class="three-d">angular
  77.                 <span class="three-d-box">
  78.                     <span class="front">angular</span>
  79.                     <span class="back">angular</span>
  80.                 </span>
  81.             </a>
  82.         </li>
  83.     </ul>
  84. </header>
  85. </body>
  86. </html>
复制代码
CSS
  1. *{
  2.     list-style: none;
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. .block-menu{
  7.     background:#AA7A53;
  8.     height:50px;
  9.     overflow:hidden;
  10.     padding-left:40px;
  11. }
  12. .block-menu li{
  13.     float: left;
  14.     margin-left: 15px;
  15. }
  16. .block-menu li a{
  17.     color:#fff;
  18.     text-decoration:none;
  19.     text-transform:uppercase;
  20.     font-size:16px;
  21.     line-height:20px;
  22.     font-weight:bold;
  23.     font-family: Arial, sans-serif;
  24.     display:block;
  25.     padding:15px 10px;
  26. }
  27. .three-d-box,.front,.back{
  28.     width: 100%;
  29.     display: block;
  30.     height:50px;
  31.     position:absolute;
  32.     top:0;
  33.     left:0;
  34.     text-align: center;
  35.     line-height: 50px;
  36.     background:#AA7A53;
  37. }
  38. .three-d{
  39.     perspective:200px;
  40.     position:relative;
  41. }
  42. .three-d-box{
  43.     -webkit-transform-style:preserve-3d;
  44.     transform-style:preserve-3d;
  45.     -webkit-transform:translateZ(-25px);
  46.     -moz-transform:translateZ(-25px);
  47.     -o-transform:translateZ(-25px);
  48.     -ms-transform:translateZ(-25px);
  49.     transform:translateZ(-25px);
  50.     -webkit-transition: all .3s ease-out;
  51.     -moz-transition: all .3s ease-out;
  52.     -o-transition: all .3s ease-out;
  53.     transition: all .3s ease-out;
  54. }
  55. .front{
  56.     -webkit-transform:rotateX(0deg) translateZ(25px);
  57.     -moz-transform:rotateX(0deg) translateZ(25px);
  58.     -o-transform:rotateX(0deg) translateZ(25px);
  59.     -ms-transform:rotateX(0deg) translateZ(25px);
  60.     transform:rotateX(0deg) translateZ(25px);
  61. }
  62. .back{
  63.     -webkit-transform:rotateX(-90deg) translateZ(25px);
  64.     -moz-transform:rotateX(-90deg) translateZ(25px);
  65.     -o-transform:rotateX(-90deg) translateZ(25px);
  66.     -ms-transform:rotateX(-90deg) translateZ(25px);
  67.     transform:rotateX(-90deg) translateZ(25px);
  68. }
  69. .three-d:hover .three-d-box{
  70.     -webkit-transform: translateZ(-25px) rotateX(90deg);
  71.     -moz-transform: translateZ(-25px) rotateX(90deg);
  72.     -o-transform: translateZ(-25px) rotateX(90deg);
  73.     -ms-transform: translateZ(-25px) rotateX(90deg);
  74.     transform: translateZ(-25px) rotateX(90deg);
  75. }
复制代码
------------------------------------------------------------------------------------>为了生活而改变,为了改变而创造.

1

主题

0

听众

37

积分

新手上路

Rank: 1

贡献
0
金钱
1
发表于 2016-5-12 16:50:05 |显示全部楼层
什么東西來的,不過還是要頂
回复

使用道具 举报

0

主题

0

听众

19

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-8-21 05:57:37 |显示全部楼层
没人回帖。。。我来个吧
回复

使用道具 举报

0

主题

0

听众

5

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-8-22 21:25:09 |显示全部楼层
非常好,顶一下
回复

使用道具 举报

0

主题

0

听众

19

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-8-26 01:20:12 |显示全部楼层
顶起顶起顶起
回复

使用道具 举报

0

主题

0

听众

7

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-9-3 10:47:49 |显示全部楼层
求沙发
回复

使用道具 举报

0

主题

0

听众

16

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-9-4 16:12:44 |显示全部楼层
学习下
回复

使用道具 举报

0

主题

0

听众

16

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-9-4 17:27:26 |显示全部楼层
沙发???
回复

使用道具 举报

0

主题

0

听众

16

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-9-4 19:15:36 |显示全部楼层
秀起来~
回复

使用道具 举报

0

主题

0

听众

8

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-9-4 21:06:02 |显示全部楼层
珍爱生命,果断回帖。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆



Archiver|手机版|     

HTML5教程网 Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部