欧美性猛交xxx嘿人猛交_又色又爽又高潮免费观看_精品国产一区二区三区久久影院_青娱乐极品视觉盛宴国产视频

技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

具有滑動效果的純CSS菜單[演示/源碼]

作者:admin    時間:2022-8-13 8:33:16    瀏覽:

本文介紹一個具有滑動效果的純CSS菜單。

demodownload

菜單介紹

當鼠標移到菜單上時，菜單滑動過渡效果高亮顯示。

完整HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">

<style>
nav {
  --c: #E5DDCB;
  --b: #524656;
  
  background: var(--b);
  display: flex;
}
ul {
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  list-style: none;
}
ul li a {
  padding: 0 .8em;
  display: block;
  color: #0000;
  background: 
    linear-gradient(var(--c) 50%,var(--b) 0) 
    0% var(--_i,100%)/100% 200%;
  text-shadow:
    0 calc(2em - var(--_i,2em)) var(--c),
    0 var(--_i,-2em) var(--b);
  text-decoration: none;
  font: bold 30px/2em sans-serif;
  overflow: hidden;
  outline-offset: -5px;
  transition: .5s;
}
ul li a:hover,
ul li.active a{
  --_i: 0px;
}
ul li a:focus-visible{
  outline: 2px dashed var(--c);
}
ul li.active a:focus-visible {
  outline-color: var(--b);
}

body {
  margin: 0;
}
</style>


</head>

<body translate="no" >
  <nav>
  <ul id="menu">
    <li><a href="/">首頁</a></li>
    <li class="active"><a href="/shop">商品展示</a></li>
    <li><a href="/about">關于我們</a></li>
    <li><a href="/contact">聯系方式</a></li>
  </ul>
  </nav>
</body>

</html>

代碼分析

HTML外層是一個<nav></mav>標簽，菜單是一個<ul><li></li></ul>項目標簽。

nav {
  --c: #E5DDCB;
  --b: #524656;
}

--c 變量是當前菜單項背景顏色。 --b 變量是整個菜單欄的背景顏色。

ul li a {
  ...
  color: #0000;
  ...
  font: bold 30px/2em sans-serif;
  ...
}

color是菜單文字顏色。font 是菜單文字大小及字體類型。

總結

本文介紹了一個具有滑動效果的純CSS菜單，代碼量不多，滑動效果是該菜單的特色，是一個實用的導航菜單。

相關文章

標簽: 導航菜單  菜單  
x