3D立體動畫效果側導航

来源:https://www.cnblogs.com/chenyingying0/archive/2020/05/08/12850944.html
-Advertisement-
Play Games

效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head ...


效果圖

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

<div class="nav-main">
    <div class="nav-box">
        <!-- 一級菜單 -->
        <div class="nav">
            <ul class="nav-ul">
                <li><a href="#" class="home"><span>首頁</span></a></li>
                <li><a href="#" class="develop"><span>H5開發</span></a></li>
                <li><a href="#" class="wechat"><span>微信推廣</span></a></li>
                <li><a href="#" class="case"><span>項目案例</span></a></li>
                <li><a href="#" class="news"><span>信息資訊</span></a></li>
                <li><a href="#" class="contact"><span>關於我們</span></a></li>
            </ul>
        </div>
        <!-- 二級菜單 -->
        <div class="nav-slide">
            <div class="nav-slide-o"></div>
            <div class="nav-slide-o">
                <ul>
                    <li><a href="#"><span>微信開發</span></a></li>
                    <li><a href="#"><span>微信開發</span></a></li>
                    <li><a href="#"><span>微信開發</span></a></li>
                    <li><a href="#"><span>微信開發</span></a></li>
                    <li><a href="#"><span>微信開發</span></a></li>
                    <li><a href="#"><span>微信開發</span></a></li>
                    <li><a href="#"><span>微信開發</span></a></li>
                    <li><a href="#"><span>微信開發</span></a></li>
                    <li><a href="#"><span>微信開發</span></a></li>
                    <li><a href="#"><span>微信開發</span></a></li>
                </ul>
            </div>
            <div class="nav-slide-o">
                <ul>
                    <li><a href="#"><span>微信關註</span></a></li>
                    <li><a href="#"><span>微信關註</span></a></li>
                    <li><a href="#"><span>微信關註</span></a></li>
                    <li><a href="#"><span>微信關註</span></a></li>
                    <li><a href="#"><span>微信關註</span></a></li>
                    <li><a href="#"><span>微信關註</span></a></li>
                    <li><a href="#"><span>微信關註</span></a></li>
                    <li><a href="#"><span>微信關註</span></a></li>
                </ul>
            </div>
            <div class="nav-slide-o">
                <ul>
                    <li><a href="#"><span>網站設計</span></a></li>
                    <li><a href="#"><span>網站設計</span></a></li>
                    <li><a href="#"><span>網站設計</span></a></li>
                    <li><a href="#"><span>網站設計</span></a></li>
                    <li><a href="#"><span>網站設計</span></a></li>
                    <li><a href="#"><span>網站設計</span></a></li>
                    <li><a href="#"><span>網站設計</span></a></li>
                    <li><a href="#"><span>網站設計</span></a></li>
                    <li><a href="#"><span>網站設計</span></a></li>
                </ul>
            </div>
            <div class="nav-slide-o">
                <ul>
                    <li><a href="#"><span>企業建站</span></a></li>
                    <li><a href="#"><span>企業建站</span></a></li>
                    <li><a href="#"><span>企業建站</span></a></li>
                    <li><a href="#"><span>企業建站</span></a></li>
                    <li><a href="#"><span>企業建站</span></a></li>
                    <li><a href="#"><span>企業建站</span></a></li>
                    <li><a href="#"><span>企業建站</span></a></li>
                    <li><a href="#"><span>企業建站</span></a></li>
                    <li><a href="#"><span>企業建站</span></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>
<script src='js/script.js'></script>
</body>
</html>

style.css

@charset "utf-8";
  html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,textarea {
  margin:0;
  padding:0;
  font-size:14px;
  line-height:24px;
  color:#000;
  font-family:microsoft yahei,verdana,Tahoma
}
ol,ul,li {
  list-style:none;
  line-height:22px
}
ol,ul {
  zoom:1
}
h1,h2,h3,h4,h5,h6 {
  font-size:100%
}
img {
  border:none;
  max-width:100%
}
a,a:link,a:visited {
  cursor:pointer;
  text-decoration:none
}
a:hover {
  cursor:pointer
}
.table {
  border-collapse:collapse;
  border-spacing:0
}
.table td {
  border:solid 1px #666
}
.clear {
  clear:both;
  float:none;
  overflow:hidden;
  height:0;
  font-size:0
}
.clearFix:after {
  clear:both;
  display:block;
  visibility:hidden;
  height:0;
  line-height:0;
  content:"."
}
.clearFix {
  zoom:1
}
* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}
:after,:before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}
.font {
  font:14px/24px "Comic Sans MS"
}
:focus {
  outline:none
}
.css3pie {
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  behavior:url(css3pie/PIE.htc)
}
body {
  font-size:14px;
  font-family:黑體-簡,黑體,微軟雅黑,Arial,Gotham,helvetica neue,Helvetica,sans-serif;
  width:100%;
  margin:0 auto;
  background-color:#313131;
  overflow-x:hidden
}
.wrap {
  width:100%;
  height:1000px
}
.wrap p {
  font-size:48px;
  text-align:center;
  color:#fff;
  padding-top:280px;
  line-height:60px
}
.logo {
  text-align:center;
  vertical-align:middle;
  background:#357dd7;
  margin-left:45%;
  top:20%;
  z-index:11;
  width:240px;
  height:240px;
  overflow:hidden;
  position:relative
}
.logo:hover {
  box-shadow:0 0 10px #333
}
.logo h1 {
  display:table-cell;
  vertical-align:middle;
  width:240px;
  height:240px
}
.logo a {
  width:240px;
  height:240px;
  overflow:hidden
}
.logo a:before {
  content:'';
  position:absolute;
  left:-230%;
  top:0;
  width:200%;
  height:120%;
  background:#1f415f;
  z-index:1;
  transform:skew(30deg,0);
  -webkit-transform:skew(30deg,0);
  -ms-transform:skew(30deg,0);
  -moz-transform:skew(30deg,0);
  -o-transform:skew(30deg,0);
  transition:all .5s;
  -moz-transition:all .5s;
  -webkit-transition:all .5s;
  -o-transition:all .5s
}
.logo a:hover {
  background:#357dd7
}
.logo a:hover:before {
  left:-60px
}
.logo img {
  position:relative;
  z-index:1
}
.nav-main {
  position:fixed;
  top:0;
  z-index:12;
  height:100%;
  width:100px;
  color:#fff;
  background:#111213
}
.nav-main a {
  color:#fff
}
.nav-box {
  position:relative;
  perspective:200px;
  -webkit-perspective:200px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  height:100%;
  z-index:99
}
.nav-ul li a {
  display:block;
  width:100px;
  height:100px;
  overflow:hidden;
  text-align:center;
  position:relative;
  transition:all .5s;
  -moz-transition:all .5s;
  -webkit-transition:all .5s;
  -o-transition:all .5s
}
.nav-ul li a:before {
  content:'';
  position:absolute;
  left:-240px;
  top:0;
  width:200px;
  height:100%;
  background:#629feb;
  z-index:1;
  transform:skew(30deg,0);
  -webkit-transform:skew(30deg,0);
  -ms-transform:skew(30deg,0);
  -moz-transform:skew(30deg,0);
  -o-transform:skew(30deg,0);
  transition:all .5s;
  -moz-transition:all .5s;
  -webkit-transition:all .5s;
  -o-transition:all .5s
}
.nav-ul li a:hover {
  background:#357dd7
}
.nav-ul li a:hover:before {
  left:-30px
}
.nav-ul li a:after {
  content:'';
  position:absolute;
  width:100%;
  height:30px;
  left:0;
  top:20px;
  z-index:1
}
.nav-ul li a span {
  display:block;
  margin-top:60px;
  perspective:;
  position:relative;
  z-index:1
}
.nav-slide {
  position:fixed;
  left:100px;
  top:0;
  width:240px;
  height:100%;
  background:#252829;
  transform:rotateY(120deg);
  -webkit-transform:rotateY(120deg);
  -moz-transform:rotateY(120deg);
  -o-transform:rotateY(120deg);
  -ms-transform:rotateY(120deg);
  z-index:99;
  visibility:hidden;
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
  -moz-transform-origin:0 0;
  -o-transform-origin:0 0;
  -ms-transform-origin:0 0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:all .5s;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -o-transition:all .5s;
  transition-timing-function:cubic-bezier(.08,.72,.71,.96);
  -webkit-transition-timing-function:cubic-bezier(.08,.72,.71,.96)
}
.nav-slide.hover {
  transform:rotateY(0deg);
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -o-transform:rotateY(0deg);
  -ms-transform:rotateY(0deg);
  z-index:15;
  visibility:visible
}
.nav-slide-o li a {
  line-height:50px;
  display:block;
  padding:0 20px;
  font-size:14px;
  overflow:hidden;
  text-align:left;
  position:relative;
  transition:all .5s;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -o-transition:all .5s
}
.nav-slide-o li a:before {
  content:'';
  position:absolute;
  left:-230%;
  top:0;
  width:200%;
  height:100%;
  background:#629feb;
  z-index:1;
  transform:skew(30deg,0);
  -webkit-transform:skew(30deg,0);
  -moz-transform:skew(30deg,0);
  -o-transform:skew(30deg,0);
  -ms-transform:skew(30deg,0);
  transition:all .5s;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -o-transition:all .5s
}
.nav-slide-o li a:hover {
  background:#357dd7
}
.nav-slide-o li a:hover:before {
  left:-60px
}
.nav-slide-o li a span {
  position:relative;
  z-index:1
}
.nav-slide-o {
  display:none
}

script.js

$(function(){
    var thisTime;
    $('.nav-ul li').mouseleave(function(even){
            thisTime    =   setTimeout(thisMouseOut,1000);
    })

    $('.nav-ul li').mouseenter(function(){
        clearTimeout(thisTime);
        var thisUB  =   $('.nav-ul li').index($(this));
        if($.trim($('.nav-slide-o').eq(thisUB).html()) != "")
        {
            $('.nav-slide').addClass('hover');
            $('.nav-slide-o').hide();
            $('.nav-slide-o').eq(thisUB).show();
        }
        else{
            $('.nav-slide').removeClass('hover');
        }
        
    })
    
    function thisMouseOut(){
        $('.nav-slide').removeClass('hover');
    }
     
    $('.nav-slide').mouseenter(function(){
        clearTimeout(thisTime);
        $('.nav-slide').addClass('hover');
    })
    $('.nav-slide').mouseleave(function(){
        $('.nav-slide').removeClass('hover');
    })

})

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 現代都市風 移動端可摺疊導航菜單
    效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="https://fonts.googleap ...
  • 移動端檢測微信瀏覽器返回，關閉，進入後臺操作
    背景：最近做一個倒計時記錄學習時長項目，需要在用戶點擊瀏覽器的返回按鈕或者直接關閉瀏覽器，或者直接退出微信或者進入後臺時記錄下當前頁面的進度，下次進去從上次退出的地方開始倒計時。一開始想的很簡單直接監測瀏覽器的返回事件window.onbeforeunload，在安卓和pc上可以監測到，但是iOS上 ...
  • 電器類電商網站分類大菜單，配色超舒服~
    效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head ...
  • 學習Vue(一)
    一、安裝 npm 1、 https://www.cnblogs.com/lgx5/p/10732016.html 二、安裝nginx 1、 https://blog.csdn.net/zuoyigehaizei/article/details/93061002 2、配置Nginx多站點 打開配置文件 ...
  • 幫助中心模板框架--簡約小清新風格
    效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head ...
  • 你應該知道的Vue高級特性
    本文詳細闡述了Vue的watch、函數式組件、非同步更新、非同步組件、批量導入等高級特性 ...
  • 移動端創意導航
    效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/reset.css"> <link ...
  • vue+elementUI在輸入框中按回車鍵會刷新頁面
    問題原因：參考element-ui文檔： W3C 標準中有如下規定： When there is only one single-line text input field in a form, the user agent should accept Enter in that field as ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類