js实现带图标下拉选择栏效果代码-html代码-BFW代码库

代码语言：html

代码描述：js实现带图标下拉选择栏效果代码

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

<html>

<head>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
        
        *,
        *::before,
        *::after {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        :root {
          --bg-color: #222429;
          --primary-bg-color: #333740;
          --primary-color: #2c62f6;
          --text-color: #b1b8ca;
          --text-active: #ffffff;
          --button-hover-bg-color: #2b2e34;
          --border-color: #494d59;
          --dropdown-height: 0;
          --rotate-arrow: 0;
          --translate-value: 0;
          --list-opacity: 0;
          --transition-time: 0.4s;
          --transition-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          --border-radius: 1.4rem;
          --list-button-height: 4.6rem;
          --floating-icon-size: 26;
          --floating-icon-top: 0;
          --floating-icon-left: 0;
        }
        
        html {
          font-size: 62.5%;
        }
        
        html,
        body {
          height: 100%;
        }
        
        body {
          display: flex;
          flex-direction: column;
          align-items: center;
          background-color: var(--bg-color);
          padding: 1.5rem;
          line-height: 1.4;
        }
        
        button {
          border: none;
          cursor: pointer;
          background-color: transparent;
          outline: none;
        }
        
        svg {
          height: 1.6rem;
          width: 1.6rem;
        }
        
        .text-truncate {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        
        .dropdown-container {
          margin-top: 30vh;
          display: flex;
          flex-direction: column;
          width: 100%;
          max-width: 34rem;
        }
        
        .dropdown-title-icon,
        .dropdown-arrow {
          display: inline-flex;
        }
        
        .dropdown-title {
          margin: 0 auto 0 1.8rem;
          text-transform: capitalize;
        }
        
        .dropdown-button {
          font-family: "Roboto", sans-serif;
          font-weight: 400;
          font-size: 1.7rem;
          display: flex;
          align-items: center;
          padding: 0 1.8rem;
        }
        
        .dropdown-button svg {
          transition: all var(--transition-time) var(--transition-timing);
          fill: var(--text-color);
        }
        
        .dropdown-button svg,
        .dropdown-button span {
          pointer-events: none;
        }
        
        .dropdown-button:hover,
        .dropdown-button:focus {
          color: var(--text-active);
        }
        
        .dropdown-button:hover svg,
        .dropdown-button:focus svg {
          fill: var(--text-active);
        }
        
        .main-button {
          height: 5.2rem;
          border-radius: var(--border-radius);
          color: var(--text-color);
          background-color: var(--primary-bg-color);
          border: 0.1rem solid var(--border-color);
          transition: all var(--transition-time) var(--transition-timing);
        }
        
        .main-button:focus {
          border: 0.1rem solid var(--primary-color);
          box-shadow: 0 0 0 0.2rem rgba(44, 98, 246, 0.4);
        }
        
        .main-button .dropdown-arrow {
          transition: transform var(--transition-time) var(--transition-timing);
          transform: rotate(var(--rotate-arrow));
          margin-left: 1.8rem;
        }
        
        .list-button {
          height: var(--list-button-height);
          transition: color var(--transition-time) var(--transition-timing);
          color: var(--text-color);
          overflow: hidden;
          cursor: none;
        }
        
        .dropdown-list-container {
          overflow: hidden;
          max-height: var(--dropdown-height);
          transition: max-height var(--transition-time) var(--transition-timing);
        }
        
        .dropdown-list-wrapper {
          margin-top: 1rem;
          padding: 1rem;
          background-color: var(--primary-bg-color);
          border-radius: var(--border-radius);
          border: 0.1rem solid var(--border-color);
          position: relative;
        }
        
        ul.dropdown-list {
          position: relative;
          list-style-type: none;
        }
        
        ul.dropdown-list::before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          z-index: 0;
          opacity: 0;
          height: var(--list-button-height);
          background-color: var(--button-hover-bg-color);
          transition: all var(--transition-time) linear;
          transform: translateY(var(--translate-value));
          border-radius: var(--border-radius);
          pointer-events: none;
        }
        ul.dropdown-list:hover::before,
        ul.dropdown-list:hover ~ .floating-icon {
          opacity: 1;
        }
        
        li.dropdown-list-item {
          display: flex;
          flex-direction: column;
          position: relative;
          z-index: 1;
          opacity: var(--list-opacity);
          transition: opacity 0.8s var(--transition-timing);
        }
        
        .floating-icon {
          height: calc(var(--floating-icon-size) * 1px);
          width: calc(var(--floating-icon-size) * 1px);
          position: absolute;
          top: var(--floating-icon-top);
          left: var(--floating-icon-left);
          background-color: var(--border-color);
          border-radius: 1rem;
          pointer-events: none;
          opacity: 0;
          transition: opacity var(--transition-time) var(--transition-timing);
          z-index: 2;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        
        .floating-icon svg {
          fill: var(--text-active);
        }
    </style>

</head>

<body>
    <div class="dropdown-container">
        <button class="dropdown-button main-button">
    <span class="dropdown-title-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
      </svg>
    </span>
    <span class="dropdown-title text-truncate">Facebook</span>
    <span class="dropdown-arrow">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
      </svg>
    </span>
  </button>
        <div class="dropdown-list-container">
            <div class="dropdown-list-wrapper">
                <ul class="dropdown-list"></ul>
                <div class="floating-icon" aria-hidden="true"></d.........完整代码请登录后点击上方下载按钮下载查看