div+css实现图标导航菜单栏悬浮效果代码-html代码-BFW代码库

div+css实现图标导航菜单栏悬浮效果代码

代码语言：html

代码描述：div+css实现图标导航菜单栏悬浮效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  
  
  
<style>
:root {
  /*  Colors option #1  */
  --icon-color: #bbbbbb;
  --selected-bg: #bfdbfe;
  --selected-icon: #1e3a8a;

  /*  Colors option #2  */
  --icon-color: #bbbbbb;
  --selected-bg: #2dd4bf;
  --selected-icon: #ffffff;
}
body {
  background-color: #eee;
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-wrapper {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-radius: 9999px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}
.material-symbols-outlined {
  position: relative;
  color: var(--icon-color);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  padding: 16px;
  border-radius: 9999px;
}
.material-symbols-outlined {
  font-size: 2em;
  cursor: pointer;
  is.........完整代码请登录后点击上方下载按钮下载查看