zoukankan      html  css  js  c++  java
  • 3dMenu

    示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>3dmenu</title>
    </head>
    <style type="text/css">
    .nav{
    900px;
    margin: 50px auto;
    background-color: #fdfdfd;
    border: 1px #333333 solid;
    }
    .nav:after{
    clear: both;
    display: block;
    content: " ";
    overflow: hidden;
    }
    .nav .item{
    200px;
    height: 100px;
    margin-right: 5px;
    float: left;
    perspective: 400000px;
    }
    .nav .item a{
    display: block;
    height: 100px;
    text-decoration: none;
    transition: all .5s;
    transform-style: preserve-3d;
    }
    .nav .item a p{
    height: 100px;
    margin: 0;
    line-height: 100px;
    color: #ffffff;
    text-align: center;
    font-size: 20px;
    border-radius: 2px;
    transition: all .5s;
    }
    .nav .item a p:first-child{
    background-color: #090;
    -webkit-transform:translateZ(50px);
    }
    .nav .item a p:last-child{
    background-color: #009;
    -webkit-transform: translateZ(50px) rotateX(-90deg);
    margin-top: -50px;
    }
    .nav .item a:hover{
    -webkit-transform: rotateX(90deg);
    }
    .nav .item a p:last-child{
    margin-top: 0;
    -webkit-transform: translateZ(0)rotateX(-90deg);
    }
    </style>
    <body>
    <div class="nav">
    <div class="item">
    <a href="#">
    <p>首页</p>
    <p>home</p>
    </a>
    </div>
    <div class="item">
    <a href="#">
    <p>问答</p>
    <p>qusition</p>
    </a>
    </div>
    <div class="item">
    <a href="#">
    <p>关于我们</p>
    <p>about</p>
    </a>
    </div>


    </div>
    </body>
    </html>

    效果图:

  • 相关阅读:
    腾讯云通信 资料
    获取openid 的步骤
    微信公众号推送通知接口
    患者接收医生的消息通知完整流程(微信公众号的界面)
    阿里im即时通讯 h5 demo
    微信微信JS-SDK 6.0.2 填坑笔记
    2018秋季寒假作业1-介绍自己
    勿忘初心
    Ubuntu中安装eclipse
    vim的常用指令
  • 原文地址:https://www.cnblogs.com/cxxBoo/p/11368063.html
Copyright © 2011-2022 走看看