整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
導航欄下劃線動畫在網頁設計中是非常常見的交互，下面將介紹幾種非常常見，非常nice的動畫特效，廢話不多說直接上演示和代碼。
css下劃線
<body>
<p>樣式1</p>
<ul id="demo1">
<li>首頁</li>
<li>產品</li>
<li>服務</li>
<li>關于</li>
</ul>
<p>樣式2</p>
<ul id="demo2">
<li>首頁</li>
<li>產品</li>
<li>服務</li>
<li>關于</li>
</ul>
<p>樣式3</p>
<ul id="demo3">
<li>首頁</li>
<li>產品</li>
<li>服務</li>
<li>關于</li>
</ul>
<p>樣式4</p>
<ul id="demo4">
<li>首頁</li>
<li>產品</li>
<li>服務</li>
<li>關于</li>
</ul>
</body>
<style type="text/css">
p{
text-align: center;
margin: 40px 0 10px 0;
}
ul{
padding: 0;
width: 400px;
height: 45px;
margin: auto;
list-style: none;
background-color: rgb(0,0,0,0.3);
display: flex;
}
li{
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/***************樣式1 *********/
#demo1 li:before{
content: '';
position: absolute;
width: 80%;
left: 10%;
bottom: 10px;
height: 5px;
background-color: coral;
opacity: 0;
}
#demo1 li:hover:before{
bottom: 0;
opacity: 1;
transition: bottom 0.3s,opacity 0.3s 0.1s;
}
/***************樣式2 *********/
#demo2 li:before{
content: '';
position: absolute;
width: 0;
left: 50%;
bottom: 0;
height: 5px;
background-color: coral;
}
#demo2 li:hover:before{
width: 80%;
left: 10%;
transition: all 0.5s;
}
/***************樣式3 *********/
#demo3 li:before{
content: '';
position: absolute;
width: 0;
left: 100%;
bottom: 0;
height: 5px;
background-color: coral;
}
#demo3 li:hover:before{
width: 80%;
left: 10%;
transition: all 0.5s;
}
#demo3 li:hover ~ li:before{
left: 0;
}
/***************樣式4 *********/
#demo4 li:before{
content: '';
position: absolute;
width: 0;
left: 0;
bottom: 0;
height: 5px;
background-color: coral;
}
#demo4 li:after{
content: '';
position: absolute;
width: 0;
right: 0;
bottom: 0;
height: 5px;
background-color: coral;
}
#demo4 li:hover:before{
width: 50%;
transition: all 0.3s ease-in-out;
}
#demo4 li:hover:after{
width: 50%;
transition: all 0.3s ease-in-out;
}
</style>如果對你有所幫助，點贊+收藏 再走
向上的路并不擁擠，而大多數人選擇了安逸
著現代 CSS 技術的發展，CSS 新特性被越來越多的瀏覽器所支持，本文主要講述使用純 CSS 實現3D導航欄的步驟，并對其中用到的關鍵樣式做一個解析。
實現方案將從一個基礎的樣式寫起，然后逐漸添加響應的偽元素來實現不同的邊，實現3D效果。與此同時，實現的過程中還給導航設置了動畫，方便鼠標 hover 的時候有個更好地用戶體驗。
小懶首先通過 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>
效果如下：
為了實現 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 函數雖然得到大多數現代瀏覽器的支持，但是在生成環境中請謹慎使用。
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;
}
}
}
&::after {
z-index: -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>
現代 CSS 賦予了現代開發者更多的能力，之前需要使用 JavaScript 來解決的業務需求，現在可以通過純 CSS 來實現了，這對開發者是一大利好。有句話能用CSS能實現的，盡量不要用 JavaScript 來實現。
SS3實現可展開收縮的彈性動畫菜單，可以用在pc端和移動端頁面。喜歡的朋友可以進來看看！
效果圖：
未點擊菜單前
點擊菜單標識后
點擊“菜單”圖標后，導航文字會逐步顯示出來，然后菜單的標識也會變回為交叉圖形
代碼展示：
html:
css:
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
