css产品服务列表页效果代码-html代码-BFW代码库

代码语言：html

代码描述：css产品服务列表页效果代码

代码标签：页效果

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    @charset "UTF-8";
:root {
  --color-brand-primary: hsl(var(--color-brand-primary-h), 43%, 43%);
  --color-brand-primary-h: 251;
  --color-brand-primary-s: 43%;
  --color-brand-primary-l: 43%;
  --color-brand-accent: hsl(var(--color-brand-accent-h), 96%, 61%);
  --color-brand-accent-h: 16;
  --color-brand-accent-s: 96%;
  --color-brand-accent-l: 61%;
  --color-brand-accent-bg: hsl(calc(var(--color-brand-accent-h) + 17), 100%, 96%);
  --ratio: 1.4;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: calc(1.05rem + 0.333vw);
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  font-size: 62.5%;
  line-height: 1.6;
  box-sizing: border-box;
}
@media (min-width: 40.625em) {
  :root {
    --s0: calc(1.25rem + 0.333vw);
  }
}
@media (min-width: 48em) {
  :root {
    --s0: calc(1.4rem + 0.333vw);
  }
}
@media (min-width: 62em) {
  :root {
    --s0: calc(1.6rem + 0.333vw);
  }
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-size: 1.4rem;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  background-color: white;
  min-height: 100vh;
}
@media (min-width: 48em) {
  body {
    font-size: 1.5rem;
  }
}

@supports (font-variation-settings: normal) {
  body {
    font-family: "Inter var", sans-serif;
  }
}
h2, h3, p, ul {
  margin: 0;
}

ul {
  padding: 0;
}
ul li {
  /* Remove li Bullets with zero-width space for accessability */
  list-style-type: none;
}
ul li:before {
  content: "";
  /* add zero-width space */
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  position: absolute;
}

.c-section {
  padding: 0 var(--s3);
}
.c-section__title {
  padding: var(--s2) var(--s3) calc(var(--s6) * 1.8);
  margin: 0 calc(var(--s3) * -1);
  color: #fff;
  font-size: var(--s4);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-align: center;
}
@media (min-width: 40.625em) {
  .c-section__title {
    padding: var(--s2) var(--s3) var(--s4);
  }
}
@media (min-width: 40.625em) {
  .c-section__title {
    display: flex;
    align-items: self-start;
    justify-content: flex-end;
    position: relative;
    text-align: unset;
  }
}
.c-section__title:after {
  content: "";
  display: block;
  background-size: calc(var(--s5) * 3) calc(var(--s5) * 3);
  width: calc(var(--s5) * 3);
  height: calc(var(--s5) * 3);
  background-repeat: no-repeat;
  background-position: center;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(11rem);
  z-index: 1;
  background-image: url("//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png");
}
@media (min-width: 40.625em) {
  .c-section__title:after {
    margin-left: auto;
    margin-right: 0;
    transform: translateY(2rem);
  }
}
.c-section span:before {
  content: "";
  display: block;
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
  transform: skew(0deg, 10deg);
  z-index: -1;
  background: var(--color-brand-primary);
  background-attachment: fixed;
  background-image: url("index.svg");
}

@media (min-width: 40.625em) {
  .c-section span:after {
    font-size: 23%;
  }
}
@media (min-width: 40.625em) {
  .c-section span:after {
    width: 47ch;
  }
}
@media (min-width: 48em) {
  .c-section span:after {
    width: 57ch;
  }
}
@media (min-width: 62em) {
  .c-section span:after {
    width: 67ch;
  }
}

.c-services {
  display: grid;
  grid-gap: var(--s2);
  margin: 0 calc(var(--s3) * -1);
  padding: var(--s6) var(--s3);
  position: relative;
  z-index: 1;
}
@media (min-width: 40.625em) {
  .c-services {
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: minmax(100px, 1fr);
  }
}
@media (min-width: 40.625em) {
  .c-services {
    padding: 0 var(--s3);
  }
}
.c-services:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-brand-accent-bg);
  width: 100%;
  height: 100%;
  transform: skew(0deg, 10deg);
  background-image: url("index.svg");
}
.c-services__item {
  background: #fff;
  padding: calc(var(--s2) - 0.6rem) var(--s1);
  border-radius: 25px;
  box-shadow: 0 7px 20px rgba(100, 28, 2, 0.135);
  transition: all 300ms ease, transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 1;
}
@media (min-width: 40.625em) {
  .c-services__item {
    transform: translateY(-85px);
  }
}
@media (min-width: 48em) {
  .c-services__item {
    transform: translateY(-130px);
  }
}
@media (min-width: 40.625em) {
  .c-services__item:nth-of-type(1) {
    grid-column: 1/-1;
    grid-row: 4;
  }
}
@media (min-width: 62em) {
  .c-services__item:nth-of-type(1) {
    grid-column: 5/-1;
    grid-row: 3;
  }
}
@media (min-width: 40.625em) {
  .c-services__item:nth-of-type(2) {
    grid-column: 1/span 3;
    grid-row: 2;
  }
}
@media (min-width: 62em) {
  .c-services__item:nth-of-type(2) {
    grid-column: 3/span 2;
    grid-row: auto;
  }
}
@media (min-width: 40.625em) {
  .c-services__item:nth-of-type(3) {
    grid-column: 4/-1;
  }
}
@media (min-width: 62em) {
  .c-services__item:nth-of-type(3) {
    grid-column: 4/-1;
    grid-row: 2;
  }
}
@media (min-width: 40.625em) {
  .c-services__item:nth-of-type(4) {
    grid-column: 1/span 4;
  }
}
@media (min-width: 62em) {
  .c-services__item:nth-of-type(4) {
    grid-column: 1/span 3;
  }
}
@media (min-width: 40.625em) {
  .c-services_.........完整代码请登录后点击上方下载按钮下载查看