导航栏翻转效果

3D翻转导航菜单
本文介绍了一种使用HTML和CSS实现的3D翻转效果的导航菜单,通过鼠标悬停触发翻转动画来显示不同的链接选项。此设计不仅美观且具有良好的交互体验。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 30px 40px;
        }

        li {
            width: 190px;
            height: 50px;
            list-style: none;
            float: left;
            border: 1px solid #ccc;
            position: relative;
            /*perspective: 900px;*/
            transform-style: preserve-3d;
        }
        
        .blackdiv {
            width: 100%;
            height: 100%;
            background-color: #000000;

            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 50% 0%;
            transform: rotateX(90deg) translateZ(25px);
            transition: transform 0.4s;
        }

        li:hover .blackdiv {
            transform: rotateX(0deg);
        }

        li:hover .whitediv {
            transform: rotateX(90deg);
        }

        .whitediv {
            width: 100%;
            height: 100%;
            background-color: #FFFFFF;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 50% 100%;
            transform: rotateX(0deg) translateZ(22px);
            transition: transform 0.4s;
        }
        .blackdiv a{
            text-decoration:none;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 40px;
            margin-left: 10px;
            font-weight: bolder;
        }
        .whitediv a{
            text-decoration:none;
            font-size: 14px;
            color: #000000;
            margin-left: 10px;
            line-height: 40px;
            font-weight: bolder;
        }
    </style>
</head>
<body>

<ul class="nav">
    <li>
        <div class="blackdiv"><a href="tool.html">TOOL</a></div>
        <div class="whitediv"><a href="tool.html">TOOL</a></div>
    </li>
    <li>
        <div class="blackdiv"><a href="work.html">WORK</a></div>
        <div class="whitediv"><a href="work.html">WORK</a></div>
    </li>
    <li>
        <div class="blackdiv"><a href="vr-360.html">VR/360</a></div>
        <div class="whitediv"><a href="vr-360.html">VR/360</a></div>
    </li>
    <li>
        <div class="blackdiv"><a href="DIRECTORS.html">DIRECTORS</a></div>
        <div class="whitediv"><a href="DIRECTORS.html">DIRECTORS</a></div>
    </li>
    <li>
        <div class="blackdiv"><a href="AWARDS.html">AWARDS</a></div>
        <div class="whitediv"><a href="AWARDS.html">AWARDS</a></div>
    </li>
    <li>
        <div class="blackdiv"><a href="ABOUT.html">ABOUT</a></div>
        <div class="whitediv"><a href="ABOUT.html">ABOUT</a></div>
    </li>
    <li>
        <div class="blackdiv"><a href="CONTACT.html">CONTACT</a></div>
        <div class="whitediv"><a href="CONTACT.html">CONTACT</a></div>
    </li>
</ul>

</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值