js+css实现航班时刻表筛选查询代码-html代码-BFW代码库

代码语言：html

所属分类：表格

代码描述：js+css实现航班时刻表筛选查询代码，有动态移位置动画过渡效果。

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
<style>
    :root {
  --window-width: clamp(0px,90vw,450px);
  --active-color: transparent;
  --tag-transition-close: 0.3s ease;
  --tag-transition-open: 0.5s cubic-bezier(0.4,0,0.6,1);
}

body {
  background-color: #070A0E;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
  text-rendering: geometricPrecision;
  box-sizing: border-box;
}
*::-webkit-scrollbar {
  display: none;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

small {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-style: normal;
}

h1, p {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

h1 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.9);
}

p {
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 165%;
  white-space: nowrap;
}

small {
  font-size: 14px;
  letter-spacing: -0.04em;
  line-height: 100%;
  white-space: nowrap;
}

.bold {
  font-weight: 500;
  color: rgba(255,255,255,0.9)
}

.light {
  font-weight: 400;
  color: rgba(255,255,255,0.45)
}

main {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,<svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.1" d="M0.5 0L0.499989 249" stroke="white"/><path opacity="0.1" d="M0 0.5L249 0.5" stroke="white"/><path opacity="0.1" d="M125 0L125 249" stroke="white" stroke-dasharray="3 3"/><path opacity="0.03" d="M62.75 0L62.75 249" stroke="white"/><path opacity="0.03" d="M187.25 0L187.25 249" stroke="white"/><path opacity="0.1" d="M0 125H249" stroke="white" stroke-dasharray="3 3"/><path opacity="0.03" d="M0 62.75H249" stroke="white"/><path opacity="0.03" d="M0 187.25H249" stroke="white"/></svg>');
  background-size: 225px 225px;
  background-position: center;
  background-repeat: repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background, .background svg {
  position: absolute;
  inset: 0;
}

.background svg:nth-child(2) {
  opacity: 1;
  transition: opacity 0.4s ease;
}
body.active .background svg:nth-child(2) {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.window {
  position: relative;
  width: var(--window-width);
  height: 450px;
  background: rgba(14,32,55,0.85);
  border-radius: 18px;
}

nav {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 48px;
  width: calc(var(--window-width) - 4px);
  padding: 2px;
  background: #1C314C;
  border-radius: 16px;
  color: #fff;
  z-index: 1;
  cursor: pointer;
  transition: background 0.4s, width var(--tag-transition-close);
  overflow: hidden;
}
body.active nav {
  transition: background 0.4s, width var(--tag-transition-open);
}

body.lighter nav {
  background: #213B5C!important;
}

.toggle {
  background-color: transparent;
}

.toggle-content {
  padding: 0 12px 0 14px;
  height: 40px;
  display: flex;
  gap: 14px;
  align-items: center;
  background-color: transparent;
}

.filter-icon {
  height: 100%;
  display: flex;
  align-items: center;
  opacity: 0.5;
}

.active-tags {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.active-tags .tray-item {
  background: #213B5C;
/*   border: 2px solid rgba(45,50,61,0.45); */
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  transition: width var(--tag-transition-close), top var(--tag-transition-close), left var(--tag-transition-close);
  pointer-events: none;
}
body.active nav .active-tags .tray-item {
  opacity: 1!important;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  transition: width var(--tag-transition-open), top var(--tag-transition-open), left var(--tag-transition-open);
}

.overflow {
  position: absolute;
  transform: translateX(4px);
  transition: opacity 0.4s;
}
body.active nav .overflow {
  opacity: 0!important;
}

.icon, body.active nav .toggle:hover .icon {
  background: currentColor;
  display: flex;
  flex-direction: center;
  justify-content: center;
  width: 16px;
  height: 8px;
  padding: 2px;
  border-radius: 3px;
  opacity: 0.5;
  transition: height .4s ease;
}
body.active nav .icon, .toggle:hover .icon {
  height: 16px;
  transition: height .2s ease;
}
.test .icon {
  height: 8px;
}
.stay-closed .icon:not(nav.activ.........完整代码请登录后点击上方下载按钮下载查看