【css】3d导航效果

其他 2018-07-06 18:00:10 阅读次数: 0 
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3实现3D立体翻转导航特效</title>
<style>
body {
    background:#edecec;
}
/* basic menu styles */
.nav-menu {
    display: block;
    /* background: #74adaa;*/
    width:950px;
    margin: 50px auto 150px;
}
.nav-menu > li {
    display: inline;
    float:left;
    border-right:1px solid #94c0be;
}
.nav-menu > li:last-child {
    border-right: none;
}
.nav-menu li a {
    color: #fff;
    display: block;
    text-decoration: none;
    /*调用本地字体*/
    font-family:sansationregular;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-transform: capitalize;
    overflow: visible;
    line-height: 20px;
    font-size: 20px;
    padding: 15px 30px 15px 31px;
}
.three-d {
    /* 任务三、设置3D舞台布景 */
    -webkit-perspective: 200px;
    -moz-perspective: 200px;
    -ms-perspective: 200px;
    -o-perspective: 200px;
    perspective: 200px;
          /*任务四、设置3D舞台布景过渡效果*/
    -webkit-transition: all .07s linear;
     -moz-transition: all .07s linear;
     -ms-transition: all .07s linear;
     -o-transition: all .07s linear;
     transition:all .7s linear;
    position: relative;
}
.three-d:not(.active):hover {
    cursor: pointer;
}
/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
.three-d:not(.active):hover .three-d-box,  .three-d:not(.active):focus .three-d-box {
    -wekbit-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);
/*    -webkit-transform:rotateX(90deg) translatez(-25px);*/
       /*   -webkit-transform:rotatex(90deg);*/
}
.three-d-box {
          /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
    -webkit-transition: all .3s ease-out;
     -moz-transition: all .3s ease-out;
     -ms-transition: all .3s ease-out;
     -o-transition: all .3s ease-out;
     transition: all .3s ease-out;
    -webkit-transform: translatez(-25px);
    -moz-transform: translatez(-25px);
    -ms-transform: translatez(-25px);
    -o-transform: translatez(-25px);
    transform: translatez(-25px);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
/*任务七、给导航设置3D前，与3D后变形效果*/
.front {
    -webkit-transform: rotatex(0deg) translatez(25px);
    -moz-transform: rotatex(0deg) translatez(25px);
    -ms-transform: rotatex(0deg) translatez(25px);
    -o-transform: rotatex(0deg) translatez(25px);
    transform: rotatex(0deg) translatez(25px);
}
.back {
    -webkit-transform: rotatex(-90deg) translatez(25px);
    -moz-transform: rotatex(-90deg) translatez(25px);
    -ms-transform: rotatex(-90deg) translatez(25px);
    -o-transform: rotatex(-90deg) translatez(25px);
    transform: rotatex(-90deg) translatez(25px);
    color: #FFE7C4;
}
.front, .back {
    /*          border:1px solid red;*/
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #74adaa;
    padding: 15px 30px 15px 31px;
    color: white;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
.nav-menu li .active .front,  .nav-menu li .active .back,  .nav-menu li a:hover .front,  .nav-menu li a:hover .back {
    background-color: #51938f;
    -webkit-background-size: 5px 5px;
    background-size: 5px 5px;
    background-position: 0 0, 30px 30px;
    background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}
.nav-menu ul {
    position: absolute;
    text-align: left;
    line-height: 40px;
    font-size: 14px;
    width: 200px;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    -o-transform-origin: 0px 0px;
    transform-origin: 0px 0px;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
.nav-menu > li:hover ul {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
</style>
</head>
<body>
<!--代码部分begin-->
<div id="nav">
  <ul class="nav-menu clearfix unstyled">
    <li><a href="#" class="three-d active"> Home <span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span> </a></li>
    <li><a href="#" class="three-d"> Services <span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span> </a></li>
    <li><a href="#" class="three-d"> Products <span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span> </a></li>
    <li><a href="#" class="three-d"> About <span class="three-d-box"><span class="front">About</span><span class="back">About</span></span> </a></li>
    <li><a href="#" class="three-d"> Contact <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span> </a></li>
    <li><a href="#" class="three-d"> Blog <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span></a>
      <ul class="clearfix unstyled drop-menu">
        <li><a href="#" class="three-d"> Html5 <span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span> </a></li>
        <li><a href="#" class="three-d"> Css3 <span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span> </a></li>
        <li><a href="#" 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="#" class="three-d"> Videogames <span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span> </a></li>
      </ul>
    </li>
    <li><a href="#" class="three-d"> Shop On-line <span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span> </a></li>
  </ul>
</div>
<!--代码部分end-->
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/websmile/p/9274814.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022