augmented-ui实现高科技选择框列表菜单效果代码-html代码-BFW代码库

augmented-ui实现高科技选择框列表菜单效果代码

代码语言：html

代码描述：augmented-ui实现高科技选择框列表菜单效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/augmented-ui.2.0.css">
    <style>
        ul[data-augmented-ui] {
          width: 100%;
          list-style: none;
          background: #a3a8b4;
          --aug-border-all: 1px;
          --aug-border-opacity: 0.5;
          padding: 0.5rem;
          padding-bottom: 1.75rem;
          --aug-tr: 1.5rem;
          --aug-br: 1.5rem;
          --aug-bl: 1.5rem;
          --aug-br-inset1: 4rem;
        }
        li {
          display: block;
          background: #545e73;
          margin: 0.25rem 0;
          padding: 0.25rem 0.5rem;
          color: #adb8cb;
          font-weight: bold;
          text-shadow: 0 0 3px rgba(0, 0, 90, 0.25);
        }
        a { color: inherit; text-decoration: none; display: block; }
        li:first-child {
          margin-top: 0;
          --aug-clip-tr1: initial;
          --aug-border: initial;
          --aug-tr1: 1.25rem;
          --aug-border-all: 1px;
          --aug-border-bg: rgba(0, 0, 90, 0.25);
        }
        li:not(:first-child) {
          border: 1px solid rgba(0, 0, 90, 0.25);
        }
        li:hover {
          background: #7d89a4;
        }
        button[data-augmented-ui] {
          background: #a3a8b4;
          border: none;
          --aug-border-all: 1px;
          --aug-border-opacity: 0.5;
          cursor: pointer;
          position: absolute;
          bottom: 0px;
          right: 2.5rem;
          height: 1.25rem;
          width: 2rem;
        }
        button + button[data-augmented-ui] {
          right.........完整代码请登录后点击上方下载按钮下载查看