电影app影片列表筛选ui效果代码-html代码-BFW代码库

代码语言：html
代码描述：电影app影片列表筛选ui效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
  
  
  
<style>
:root {
  --red: rgb(229, 57, 53);
  --yellow: rgb(251, 192, 45);
  --green: rgb(67, 160, 71);
  --purple: rgb(148, 29, 232);
  --disney-blue: rgb(17, 60, 207);
  --prime-blue: rgb(0, 168, 225);
  --paramount-blue: rgb(17, 81, 138);
  --vudu-blue: rgb(41, 109, 192);
  --font-color: rgb(20, 20, 20);
  --lighter-font-color: rgb(80, 80, 80);
  --highlight-color: rgb(33, 150, 243);
}

body {
  background-color: rgb(10, 10, 10);
  margin: 0px;
}

* {
  box-sizing: border-box;
}

h1, h2, h3, input, select, button, span, a {
  color: var(--font-color);
  font-family: "Rubik", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  margin: 0px;
}

.toggle {
  background-color: rgb(245, 245, 245);
  border: none;
  border-radius: 5rem;
  color: var(--lighter-font-color);
  font-weight: 500;
  padding: 0.5rem 1rem;
  outline: none;
  text-transform: uppercase;
  cursor: pointer;
}

.highlight {
  color: var(--highlight-color);
}

.toggle > .label {
  color: var(--lighter-font-color);
  font-weight: 500; 
}

.toggle:hover,
.toggle:focus {
  background-color: rgb(235, 235, 235);
}

#phone {
  background-color: white;
  height: 851px;
  width: 393px;  
  margin: 100px auto;
  position: relative;
}

#main-wrapper {
  height: 100%;
  overflow: auto;
}

.fancy-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.fancy-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
}

.fancy-scrollbar::-webkit-scrollbar-thumb {
  background: rgb(230, 230, 230);
}

#main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.25rem;
}

#top-bar {
  border: 0.15rem solid rgb(240, 240, 240);
  border-left-color: var(--red);
  border-right-color: var(--red);
  border-radius: 5rem;
  padding: 0.5rem 0.75rem;
  padding-left: 1.25rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

#top-bar > .logo {
  color: var(--red);
  font-size: 1.5rem;
  cursor: pointer;
}

#top-bar > .search-bar {
  background-color: transparent;
  border: none;
  color: var(--lighter-font-color);
  outline: none;
  font-size: 1rem;
  flex-grow: 1;
  min-width: 0px;
}

#top-bar > .search-bar::placeholder {
  color: rgba(0, 0, 0, 0.5); 
}

#top-bar > .account-button {
  background-color: rgb(245, 245, 245);
  border: none;
  outline: none;
  color: var(--lighter-font-color);
  font-size: 1rem; 
  height: 2rem;
  width: 2rem;
  border-radius: 2rem;
  text-align: center;
  flex-shrink: 0;
  cursor: pointer;
}

#top-bar > .account-button:hover,
#top-bar > .account-button:focus {
  background-color: rgb(235, 235, 235);
}

#navbar {
  background-color: white;
  border-top: 1px solid rgb(240, 240, 240);
  box-shadow: 0px -0.25rem 1rem rgba(0, 0, 0, 0.05);
  position: absolute;
  z-index: 100;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 0.75rem 2rem;
  display: flex;
  justify-content: space-between;
}

#navbar > .navbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-basis: 3rem;
  gap: 0.25rem;
  text-decoration: none;
  outline: none;
}

#navbar > .navbar-item:hover > i ,
#navbar > .navbar-item:focus > i {
  background-color: rgb(245, 245, 245);
}

#navbar > .navbar-item[data-selected="true"] > i {
  background-color: rgb(240, 240, 240);
  color: var(--red);
}

#navbar > .navbar-item > i,
#navbar > .navbar-item > .label {
  color: var(--lighter-font-color);
}

#navbar > .navbar-item > i { 
  padding: 0.25rem;
  border-radius: 5rem;
  width: 120%;
  text-align: center;
}

#navbar > .navbar-item > .label {
  font-size: 0.75rem;
  font-weight: 500;
}

#content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#content[data-option="at-home"] > #content-filters > .streaming-service-filter {
  display: flex;
}

#content-title-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#content-title-bar > .title-section > .title {
  color: var(--lighter-font-color);
  font-size: 2.5rem;
  line-height: 2.25rem;
  font-weight: 500;
}

#content-title-bar > .title-section > .subtitle {
  color: rgb(200, 200, 200);
  text-transform: uppercase;
  font-weight: 500;
}

#content-title-bar > .option-selector {
  border-right: 0.75rem solid rgb(245, 245, 245);
}

#content-title-bar > .option-selector:hover,
#content-title-bar > .option-selector:focus {
  border-color: rgb(235, 235, 235);
}

#content-title-bar > .option-selector > option {
  font-weight: 500;
}

#content-filters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

#content-filters > .content-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}

#content-filters > .content-filter[data-toggled="true"] > .content-filter-expanded-modal {
  display: block;
}

#content-filters > .content-filter > .content-filter-toggle {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  white-space: nowrap;
}

#content-filters > .content-filter > .content-filter-toggle > i {
  font-size: 0.9rem; 
}

#content-filters > .content-filter > .content-filter-options {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  overflow: auto;
}

#content-filters > .content-filter > .content-filter-options::-webkit-scrollbar {
  height: 0px;
}

#content-filters > .content-filter > .content-filter-options > .content-filter-option {
  background-color: transparent;
  border: 1px solid rgb(230, 230, 230);    
  border-radius: 5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  outline: none;
  text-transform: uppercase;
  cursor: pointer;
}

#content-filters > .content-filter > .content-filter-options > .content-filter-option:hover,
#content-filters > .content-filter > .content-filter-options > .content-filter-option:focus {
  background-color: rgb(230, 230, 230);
}

#content-filters > .content-filter > .content-filter-options > .content-filter-option > .label {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

#content-filters > .content-filter > .content-filter-options > .content-filter-option > .label > .highlight {
  font-size: 0.9rem;
  font-weight: 500;
}

#content-filters > .content-filter > .content-filter-options > .content-filter-option > .remove {
  font-size: 0.9rem;
  height: 0.8rem;
}

#content-filters > .streaming-service-filter {
  display: none;
}

#content-filters > .streaming-service-filter > .streaming-service-filter-options > .streaming-service-option.netflix > .label {
  color: var(--red);
}

#content-filters > .streaming-service-filter > .streaming-service-filter-options > .streaming-service-option.hulu > .label  {
  color: var(--green);
}

#content-filters > .streaming-service-filter > .streaming-service-filter-options > .streaming-service-option.hbo-max > .label  {
  color: var(--purple);
}

#content-filters > .streaming-service-filter > .streaming-service-filter-options > .streaming-service-option.disney > .label  {
  color: var(--disney-blue);
}

#content-filters > .additional-filters > .additional-filters-toggle > i {
  font-size: 0.9rem;
}

#content-filters > .content-filter > .content-filter-expanded-modal {
  background-color: white;
  border-top: 1px solid rgb(240, 240, 240);
  box-shadow: 0px -0.25rem 1rem rgba(0, 0, 0, 0.05);
  display: none;
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 101;
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-modal-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-modal-top-bar > .label {
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-modal-top-bar > .close {
  background-color: transparent;
  border: none;
  outline: none;
  border-radius: 2rem;
  font-size: 1.25rem;
  padding: 0.25rem;
  height: 2rem;
  width: 2rem;  
  text-align: center;
  cursor: pointer;
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-modal-top-bar > .close:hover {
  background-color: rgb(240, 240, 240);
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgb(240, 240, 240);
  max-height: 18rem;
  overflow: auto;
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options > .content-filter-expanded-options-section {
  border-top: 5px solid rgb(240, 240, 240);
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options > .content-filter-expanded-options-section > .label {  
  font-weight: 500;
  padding: 1rem;
  text-transform: uppercase; 
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: transparent;
  border: none;
  outline: none;  
  padding: 1rem;
  cursor: pointer;
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option:hover,
#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option:focus {
  background-color: rgb(245, 245, 245);
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option[data-selected="true"] > .select {
  display: none;
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option[data-selected="true"] > .deselect {
  display: block;
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option.netflix > .label {
   color: var(--red);
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option.hulu > .label {
   color: var(--green);
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option.vudu > .label {
   color: var(--vudu-blue);
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option.hbo-max > .label {
   color: var(--purple);
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option.disney > .label {
   color: var(--disney-blue);
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option.prime-video > .label {
   color: var(--prime-blue);
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option.paramount > .label {
   color: var(--paramount-blue);
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-expanded-options .content-filter-expanded-option > i {
  font-size: 1.25rem;
}

#content-filters > .content-filter > .content-filter-expanded-modal > .content-filter-ex.........完整代码请登录后点击上方下载按钮下载查看