css+js实现带玻璃磨砂透明液态汇聚动画的导航栏切换效果代码-html代码-BFW代码库

css+js实现带玻璃磨砂透明液态汇聚动画的导航栏切换效果代码

代码语言：html

代码描述：css+js实现带玻璃磨砂透明液态汇聚动画的导航栏切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">

  
<style>
/* Navigation styling with glassmorphism effect */
nav {
  display: flex;
  position: relative;
  transform: translate3d(0, 0, 0.01px);
  opacity: 0.999;
  background: hsl(205deg 0% 100% / 0.1);
  -webkit-backdrop-filter: blur(18px) brightness(1.1);
          backdrop-filter: blur(18px) brightness(1.1);
  border-radius: 100vw;
  padding: 0.4em;
  box-shadow: 
    0 4px 24px hsl(205deg 50% 30% / 0.2),
    0 4px 12px hsl(205deg 30% 10% / 0.1),
    inset 0 -4px 18px 6px hsl(205deg 70% 90% / 0.3),
    inset 0 -2px 6px hsl(205deg 70% 90% / 0.15),
    inset 0 -1px 1px hsl(205deg 70% 90% / 0.4),
    inset 0 10px 18px hsl(205deg 30% 10% / 0.2),
    inset 0 1px 2px hsl(205deg 70% 90% / 0.3);
}

/* First noise texture layer */
nav:before {
  content: "";
  inset: 0;
  position: absolute;
  -webkit-mask-image: url(//repo.bfw.wiki/bfwrepo/image/5dd653c337706.png);
          mask-image: url(//repo.bfw.wiki/bfwrepo/image/5dd653c337706.png);
  mask-mode: luminance;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-size: 55%;
          mask-size: 55%;
  border-radius: 100vw;
  z-index: 1;
  -webkit-backdrop-filter: blur(8px) brightness(1.05);
          backdrop-filter: blur(8px) brightness(1.05);
  background: hsl(205deg 0% 100% / 0.1);
}

/* Second noise texture layer */
nav:after {
  content: "";
  inset: 0;
  position: absolute;
  -webkit-mask-image: url(//repo.bfw.wiki/bfwrepo/image/5dd653c337706.png);
          mask-image: url(//repo.bfw.wiki/bfwrepo/image/5dd653c337706.png);
  mask-mode: luminance;
  -webkit-mask-size: 50%;
          mask-size: 50%;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  border-radius: 100vw;
  z-index: 2;
  -webkit-backdrop-filter: blur(6px) brightness(0.95);
          backdrop-filter: blur(6px) brightness(0.95);
  box-shadow: 
    inset 0 -4px 18px 6px hsl(205deg 70% 90% / 0.3),
    inset 0 -2px 6px hsl(205deg 70% 90% / 0.15),
    inset 0 -1px 1px hsl(205.........完整代码请登录后点击上方下载按钮下载查看