css+js实现自适应商品列表数据分类筛选效果代码-html代码-BFW代码库

css+js实现自适应商品列表数据分类筛选效果代码

代码语言：html

所属分类：响应式

代码描述：css+js实现自适应商品列表数据分类筛选效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500&display=swap");
        @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
        html {
          font-family: "Open Sans", sans-serif;
          font-weight: 300;
          min-height: 100vh;
          width: 100vw;
          font-size: 16px;
          box-sizing: border-box;
        }
        html * {
          box-sizing: inherit;
        }
        
        body {
          display: flex;
          flex-direction: column;
          flex: 0 0 100%;
          margin: 0;
          background: #f5f5f5;
          align-items: center;
          justify-content: flex-start;
          padding: 0 1.5rem;
        }
        
        .filters,
        .products {
          margin: 2rem auto;
          padding: 0;
          width: 1100px;
          max-width: 100%;
        }
        
        .filters {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 1rem;
        }
        
        .filter {
          all: unset;
          appearence: none;
          cursor: pointer;
          color: #222;
          opacity: 0.35;
          font-weight: 500;
          transition: 0.2s ease;
        }
        .filter:hover, .filter:focus {
          opacity: 0.7;
        }
        .filter.is-active {
          opacity: 1;
        }
        
        .products {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
          grid-auto-rows: auto;
          gap: 1.5rem;
          position: relative;
        }
        
        .product {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
          overflow: hidden;
          position: relative;
          text-decoration: none;
          color: #222;
          will-change: opacity, visibility, transform;
          transition-property: opacity, visibility;
          transition-duration: 350ms;
          transition-timing-function: ease;
        }
        .product:hover, .product:focus {
          outline: none;
          text-decoration: none;
        }
        .product:hover .product__image-inner, .product:focus .product__image-inner {
          transform: scale(1.1, 1.1);
          filter: grayscale(0);
        }
        .product.is-hidden {
          position: absolute;
          visibility: hidden;
          opacity: 0;
        }
        .product__image {
          position: relative;
          margin-bottom: 0.5rem;
          overflow: hidden;
          width: 100%;
          aspect-ratio: 1/1;
        }
        .product__image-inner {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          -o-object-fit: cover;
             object-fit: cover;
          -o-object-position: 50% 50%;
             object-position: 50% 50%;
          filter: grayscale(0.7);
          transition: 0.2s ease;
        }
        .product__name {
          font-size: 1.125rem;
          font-weight: 500;
          margin: 0;
          line-height: 1;
        }
        .product__rating {
          display: flex;
          line-height: 1;
          font-size: 1.5rem;
          font-family: "Material Symbols Outlined";
          font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 200, "opsz" 48;
        }
        .product__rating span {
          display: contents;
        }
        .produ.........完整代码请登录后点击上方下载按钮下载查看