Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 免费播放一区二区三区,高清一级毛片免免费看,在线中文字幕亚洲 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          現代CSS：純 CSS 實現 3D 導航欄
          
        
           
          
	
	
          
		
                        
          著現代 CSS 技術的發展，CSS 新特性被越來越多的瀏覽器所支持，本文主要講述使用純 CSS 實現3D導航欄的步驟，并對其中用到的關鍵樣式做一個解析。
          1.整體效果
          2.實現方案
          實現方案將從一個基礎的樣式寫起，然后逐漸添加響應的偽元素來實現不同的邊，實現3D效果。與此同時，實現的過程中還給導航設置了動畫，方便鼠標 hover 的時候有個更好地用戶體驗。
          2.1.基礎框架編寫
          小懶首先通過 html:5 快速創建 html5 頁面基礎框架，然后通過 schema div[class=container]>ul[class=navlist]>(li>a[href=#])*5 快速創建導航 html 框架。同時給基礎框架增加了基礎樣式，樣式中我們使用了現代 CSS 的一些特性，比如 CSS 元素嵌套（插入鏈接）、CSS 自定義屬性等新的特性。
          <style>
  :root {
    --color: #4855B0;
  }
  body { margin: 0; padding: 0}
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    .navlist {
      list-style: none;
      padding: 0;
      & li {
        & a {
          display: block;
          padding: 15px 25px;
          background-color: var(--color);
          color: #fff;
          text-decoration: none;
          &:hover {
            --color: #f00;
            left: -20px;
          }
        }
      }
    }
  }
</style>
<!--div[class=container]>ul[class=navlist]>(li>a[href=#])*5-->
<div class="container">
  <ul class="navlist">
    <li><a href="#">首頁</a></li>
    <li><a href="#">用戶管理</a></li>
    <li><a href="#">菜單管理</a></li>
    <li><a href="#">日志管理</a></li>
    <li><a href="#">權限管理</a></li>
  </ul>
</div>

          效果如下：
          2.2.3D效果實現
          為了實現 3D 效果，需要旋轉對各面做傾斜變化，正面需要Y軸傾斜 -15deg，側面需要Y軸傾斜 45deg，頂面需要X傾斜 45deg。側面和頂面我們使用 CSS 偽元素 ::before 和 ::after 來實現。在CSS 實現中背景顏色我們使用 color-mix 顏色混合函數來自動計算背景顏色。
          // 正面
a {
  transform: skewY(-15deg);
}
a {
  &::before {
    position: absolute;
    left: -20px;
    bottom: 10px;
    width: 20px;
    height: 100%;
    content: "";
    background-color: color-mix(in srgb, var(--color), black 20%);
    transform: skewY(45deg);
    transition: background-color 200ms;
  }
  &::after {
    position: absolute;
    left: -10px;
    top: -20px;
    width: 100%;
    height: 20px;
    content: "";
    background-color: color-mix(in srgb, var(--color), black 20%);
    transform: skewX(45deg);
  }
}

          效果圖如下：
          從上面效果圖可以看到，3D效果已經實現，但是頂面和正面的層級還是有點問題，以至于效果看著比較別扭，我們再整體調試一節中將調試細節。請注意：color-mix 函數雖然得到大多數現代瀏覽器的支持，但是在生成環境中請謹慎使用。
          2.3.整體調試
          1）首先對導航的各項做了層級定義：
          & li {
  &:nth-child(1) {
    & a {
      z-index: 5;
    }
  }
  &:nth-child(2) {
    & a {
      z-index: 4;
    }
  }
  &:nth-child(3) {
    & a {
      z-index: 3;
    }
  }
  &:nth-child(4) {
    & a {
      z-index: 2;
    }
  }
  &:nth-child(5) {
    & a {
      z-index: 1;
    }
  }
}

          1. 對頂面的偽元素設置層級
          &::after {
  z-index: -1;
}

          1. 給各面定義動畫
          & a {
  transition: left 200ms, background-color 200ms;
  
  &::before {
    transition: background-color 200ms;
  }
  &::after {
    transition: background-color 200ms;
  }
}

          4）整體實現代碼
          <style>
  :root {
    --color: #4855B0;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 150px;
    .navlist {
      list-style: none;
      padding: 0;
      transform: skewY(-15deg);
      & li {
        &:nth-child(1) {
          & a {
            z-index: 5;
          }
        }
        &:nth-child(2) {
          & a {
            z-index: 4;
          }
        }
        &:nth-child(3) {
          & a {
            z-index: 3;
          }
        }
        &:nth-child(4) {
          & a {
            z-index: 2;
          }
        }
        &:nth-child(5) {
          & a {
            z-index: 1;
          }
        }
        & a {
          position: relative;
          left: 0;
          display: block;
          padding: 15px 25px;
          background-color: var(--color);
          color: #fff;
          text-decoration: none;
          transition: left 200ms, background-color 200ms;
          
          &::before {
            position: absolute;
            left: -20px;
            bottom: 10px;
            width: 20px;
            height: 100%;
            content: "";
            background-color: color-mix(in srgb, var(--color), black 20%);
            transform: skewY(45deg);
            transition: background-color 200ms;
          }
          &::after {
            position: absolute;
            left: -10px;
            top: -20px;
            width: 100%;
            height: 20px;
            content: "";
            background-color: color-mix(in srgb, var(--color), black 20%);
            transform: skewX(45deg);
            transition: background-color 200ms;
            z-index: -1;
          }
          &:hover {
            --color: #f00;
            left: -20px;
          }
        }
      }
    }
  }
</style>
<div class="container">
  <ul class="navlist">
    <li><a href="#">首頁</a></li>
    <li><a href="#">用戶管理</a></li>
    <li><a href="#">菜單管理</a></li>
    <li><a href="#">日志管理</a></li>
    <li><a href="#">權限管理</a></li>
  </ul>
</div>

          3.總結
          現代 CSS 賦予了現代開發者更多的能力，之前需要使用 JavaScript 來解決的業務需求，現在可以通過純 CSS 來實現了，這對開發者是一大利好。有句話能用CSS能實現的，盡量不要用 JavaScript 來實現。
          動端側邊滑出導航欄是一種常見的UI設計，可以提升用戶體驗和導航的可用性。本文將詳細介紹如何利用前端技術實現移動端側邊滑出導航欄，并給出相關的代碼示例。
          首先，我們需要一個觸發導航欄滑出的按鈕。通常情況下，這個按鈕會放在頁面的頂部或者底部，以便用戶方便點擊。我們可以使用HTML和CSS來創建這個按鈕。
          HTML代碼如下所示：
          ```html菜單```
          CSS代碼如下所示：
          ```css.nav-button { position: fixed; top: 20px; left: 20px; width: 60px; height: 60px; background-color: #000; color: #fff; border: 0; border-radius: 50%; font-size: 16px;}```
          以上代碼創建了一個圓形的按鈕，并設置了一些基本樣式，可以根據實際需求進行調整。
          接下來，我們需要實現導航欄滑出的效果。可以使用CSS來實現，具體代碼如下：
          HTML代碼如下所示：
          ```html```
          CSS代碼如下所示：
          ```css.nav-menu { position: fixed; top: 0; left: -80%; width: 80%; height: ; background-color: #fff; transition: all 0.3s ease;}
          .nav-menu.open { left: 0;}
          .nav-menu ul { list-style: none; padding: 0; margin: 0;}
          .nav-menu ul li { padding: 10px 20px; border-bottom: 1px solid #ccc; cursor: pointer;}
          .nav-menu ul li:last-child { border-bottom: none;}```
          以上代碼創建了一個導航欄，并設置了一些基本樣式。使用左側負值的left屬性隱藏了導航欄，當給導航欄添加open類名后，left屬性變為0，導航欄就可以滑出。
          接下來，我們需要使用JavaScript來處理按鈕的點擊事件，實現導航欄的滑出和收起。可以使用以下代碼：
          ```javascriptconst navButton = document.querySelector('.nav-button');const navMenu = document.querySelector('.nav-menu');
          navButton.addEventListener('click', () => { navMenu.classList.toggle('open');});```
          以上代碼添加了一個點擊事件監聽器，當按鈕被點擊時，toggle方法會切換導航欄元素的open類，從而實現導航欄的滑出和收起效果。
          至此，我們已經完成了移動端側邊滑出導航欄的制作。當用戶點擊按鈕時，導航欄將從左側滑出，再次點擊按鈕時，導航欄將收起。這種交互方式可以為用戶提供良好的導航體驗。
          總結一下，要實現移動端側邊滑出導航欄，我們需要使用HTML、CSS和JavaScript。通過添加一個按鈕和一個導航欄元素，利用CSS的transition屬性和JavaScript的事件監聽器，可以輕松實現這一效果。希望本文的內容對你有所幫助。
          果圖：
          index.html
          <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML+CSS3橫向導航欄</title>
<link rel="stylesheet" href="index.css" media="screen" type="text/css" />
</head>
<body>
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">Tab One</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two">Tab Two</label>
<input id="three" name="tabs" type="radio">
<label for="three">Tab Three</label>
<input id="four" name="tabs" type="radio">
<label for="four">Tab Four</label>
<div class="panels">
<div class="panel">
<h2>This is Panel One</h2>
<p>This is Panel One</p>
</div>
<div class="panel">
<h2>This is Panel Two</h2>
<p>this is panel two</p>
</div>
<div class="panel">
<h2>This is Panel Three</h2>
<p>this is panel three</p>
</div>
<div class="panel">
<h2>This is Panel four</h2>
<p>this is panel four</p>
</div>
</div>
</article>
</body>
</html>
          index.css
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
午夜无码视频一区二区三区|
国产裸体舞一区二区三区|
制服丝袜一区二区三区|
亚洲一本一道一区二区三区|
亚洲乱码日产一区三区|
亚洲AV香蕉一区区二区三区|
消息称老熟妇乱视频一区二区|
视频在线观看一区|
蜜臀AV无码一区二区三区|
91一区二区视频|
日韩AV无码久久一区二区|
国产福利电影一区二区三区，日韩伦理电影在线福
|
2021国产精品一区二区在线|
国产激情无码一区二区三区|
在线观看国产一区亚洲bd|
无码人妻一区二区三区av|
日韩毛片基地一区二区三区|
亚洲av无码一区二区三区天堂古代
|
亚洲午夜日韩高清一区|
福利一区二区视频|
国产成人无码aa精品一区|
亚洲AV无码一区二区三区网址|
亚洲蜜芽在线精品一区|
亚洲一区二区三区在线观看蜜桃|
久久久久人妻一区精品色|
亚洲宅男精品一区在线观看|
精品国产一区二区三区无码|
日韩精品一区二区三区老鸭窝
|
久久一区二区三区精品|
日韩精品一区二区三区四区
|
一区在线免费观看|
中文字幕一区在线观看|
亚洲国产成人一区二区三区|
秋霞午夜一区二区|
国产精品久久一区二区三区|
免费看AV毛片一区二区三区|
国产精品小黄鸭一区二区三区
|
日本高清无卡码一区二区久久
|
国产亚洲综合一区二区三区
|
亚洲乱码一区二区三区在线观看|
亚洲国产精品第一区二区三区|