磨砂玻璃效果的Tab栏
生活随笔
收集整理的這篇文章主要介紹了
磨砂玻璃效果的Tab栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖先上
這是我在b站跟寫模仿的，據我觀察這教材應該是從外網扒的，所以我就不貼鏈接了。
代碼放在這里。
html：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Magic line indecators 4</title><link rel="stylesheet" href="./index.css"></head> <body><ul><li><a href="#"><ion-icon name="planet-outline"></ion-icon></a></li><li><a href="#"><ion-icon name="person-outline"></ion-icon></a></li><li><a href="#"><ion-icon name="settings-outline"></ion-icon></a></li><li><a href="#"><ion-icon name="chatbubble-outline"></ion-icon></a></li><li><a href="#"><ion-icon name="add-circle-outline"></ion-icon></a></li><div id="marker"></div></ul><script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script><script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script><script type="text/javascript" src='./index.js'></script> </body> </html>其中的index.css代碼如下
* {margin: 0;padding: 0;box-sizing: border-box; }body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #1e2795; }ul {position: relative;display: flex;justify-content: center;align-items: center;border-radius: 10px;box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); } ul li {list-style: none; } ul li a {position: relative;color: #fff;text-decoration: none;display: inline-block;padding: 20px 30px;z-index: 1000;backdrop-filter: blur(15px); } ul li a ion-icon {font-size: 2.5em;pointer-events: none;opacity: 0.25;transition: 0.25s; } ul li .active a ion-icon {opacity: 1; } #marker {position: absolute;top: 0;transition: 0.5s;z-index: 1; }#marker::before {content: "";position: absolute;top: 0;left: 50%;transform: translateX(-50%) translateY(-50%);width: 50px;height: 40px;border-radius: 8px; }ul li:nth-child(1).active ~ #marker::before {background: #5da6ff;box-shadow: 0 0 15px #5da6ff, 0 0 30px #5da6ff, 0 0 45px #5da6ff,0 0 60px #5da6ff; } ul li:nth-child(2).active ~ #marker::before {background: #ff0;box-shadow: 0 0 15px #ff0, 0 0 30px #ff0, 0 0 45px #ff0, 0 0 60px #ff0; } ul li:nth-child(3).active ~ #marker::before {background: #0f0;box-shadow: 0 0 15px #0f0, 0 0 30px #0f0, 0 0 45px #0f0, 0 0 60px #0f0; } ul li:nth-child(4).active ~ #marker::before {background: #df2fff;box-shadow: 0 0 15px #df2fff, 0 0 30px #df2fff, 0 0 45px #df2fff,0 0 60px #df2fff; } ul li:nth-child(5).active ~ #marker::before {background: #ff308f;box-shadow: 0 0 15px #ff308f, 0 0 30px #ff308f, 0 0 45px #ff308f,0 0 60px #ff308f; }其中的index.js代碼如下
let marker = document.querySelector("#marker"); let list = document.querySelectorAll('ul li'); console.log(marker);function moveIndicator(e) {marker.style.left = e.offsetLeft + "px";marker.style.width = e.offsetWidth + "px"; }list.forEach(link => {link.addEventListener('mousemove', (e) => {moveIndicator(e.target);}) })function activeLink() {list.forEach((item) => {item.classList.remove('active');});this.classList.add('active'); }list.forEach((item) => {item.addEventListener('mouseover', activeLink) })我總結一下整個案例中，我在跟練過程中的收獲。
- 毛玻璃效果的css
backdrop-filter: blur(15px);這一屬性的本質是使背景虛化
- border-shadow屬性
這一屬性用于做marker亮塊兒周圍的光暈和整個tab欄周圍的陰影。
光暈的代碼：
box-shadow接收2個必須參數和4個可選參數，
h-shadow： 必需的。水平陰影的位置。允許負值；
v-shadow ：必需的。垂直陰影的位置。允許負值；
blur 可選。模糊距離；
spread 可選。陰影的大小;
color 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表;
inset 可選。從外層的陰影（開始時）改變陰影內側陰影
- 選擇器 ~和+
1.‘~’選擇器則表示某元素后所有同級的指定元素，強調所有的。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.h3 ~ p{color: red;}</style> </head> <body><p>這是段落標簽</p><p>這是段落標簽</p><p>這是段落標簽</p><h3 class="h3">這是標題標簽</h3><p>這是段落標簽</p><p>這是段落標簽</p><p>這是段落標簽</p><h3>這是標題標簽</h3><p>這是段落標簽</p><p>這是段落標簽</p><p>這是段落標簽</p> </body> </html>效果如下
‘+’選擇器則表示某元素后相鄰的一個兄弟元素，也就是緊挨著的，是單個的。
效果如下：
ul li:nth-child(1).active ~ #marker::before {}
:nth-child(n) 選擇器匹配父元素中的第 n 個子元素，元素類型沒有限制。~ 是兄弟選擇器。
所以案例中的ul li:nth-child(1).active指的是li標簽的父元素的第一個子元素，也就是ul包裹的第一個li， #marker::before 是被選中的標簽背后的亮點，組合起來的意思就是與第一個li標簽同級的光斑，也就是第一個li標簽對應的光斑。
- 收獲了一個好用的ui組件庫，有點類似于antd，這個小案例中的圖標是從這個網站引入的 點這里
- 關于js的一點收獲
style.left是字符串。計算一般用offsetLeft；
offsetHeight是對象屬性，如果父元素有定位，(position:absolute/relative)那么它就是相對于父元素的。如果父元素沒有定位，那么就是相對于body的。
scrollTop頁面利用滾動條滾動到下方時，隱藏在滾動條上方頁面的高度。
總結
以上是生活随笔為你收集整理的磨砂玻璃效果的Tab栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c++实现磨砂玻璃（类似马赛克）效果
- 下一篇： 毛玻璃，磨砂玻璃材质，shader笔记