自适应服装类企业网站效果-html代码-BFW代码库

代码语言：html
代码描述：自适应服装类企业网站效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
    --brand-color:#FFF;
}
body,html {
    height:100%;
    font-size:16px;
}
body {
    margin:0;
    font-family:'Nunito';
    overflow-x:hidden;
}
button {
    font-family:'Nunito';
}
h3 {
    display:block;
    font-size:2rem;
    margin:1rem 0;
}
h3,h4 {
    font-weight:400;
}
p {
    font-weight:300;
    text-align:left;
}
a {
    text-decoration:none;
    color:inherit;
}
button {
    display:block;
    margin:15px 0;
    position:relative;
    background:none;
    border:none;    
    font-size:1rem;
    padding:0;
    cursor:pointer;
}
img {
   width:100%; 
   display:block;
}
/* LAYOUT */ 
.grid-container {
    max-width:1170px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(365px,1fr));
    grid-gap:35px;
    text-align:center;
    margin:35px auto;
    padding: 0 15px;
}
.grid-item {
    overflow: hidden;
}
.centered {
    display: -webkit-box;
    display: flex;
    -webkit-box-align:start;
            align-items:start;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column; 
}
@media screen and (max-width:768px) {
    .grid-container {
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
}
/* BUTTONS */
.arrow-btn {
    position:relative;
    text-align:left;
}
.arrow-btn span {
    position:relative; 
}
.arrow-btn:hover span:before {
    -webkit-transform:translateX(10px);
            transform:translateX(10px);
}
.arrow-btn:hover span:after {
    -webkit-transform:translateX(10px) rotate(-135deg);
            transform:translateX(10px) rotate(-135deg);
}
.arrow-btn span:before {
    content: "";
    position: absolute;
    top: 10px;
    height: 2px;
    width: 22px;
    background: #000;
    left: 11px;
    -webkit-transition:0.16s ease;
    transition:0.16s ease;
}
.arrow-btn span:after {
    content:"";
    position:absolute;
    top:8px;
    right:-36px;
    border-width:3px;
    border-style:solid;
    border-color:transparent transparent #000 #000;
    -webkit-transform:rotate(-135deg);
            transform:rotate(-135deg);
    -webkit-transition:0.16s ease;
    transition:0.16s ease;
}
/* SECTIONS */ 
.arrivals,.quote,.fashion,.modern {
    padding:45px 0px;
}
.info h3, .arrivals h3, .fashion h3, .quote h3 {
    color: #000;
    font-size: 1.5rem;
    width: 100%;
    text-align: left;
}
/* PRELOADER */
.preloader {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:2;
    display:-webkit-box;
    display:flex;
    -webkit-box-align:center;
            align-items:center;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
            flex-direction:column;
}
.preloader:before {
    content:"";
    position:fixed;
    width:50%;
    height:100%;
    background:#FFF;
    z-index:2;
    left:0;
    top:0;
    -webkit-transition:0.72s ease transform 0.16s;
    transition:0.72s ease transform 0.16s;
}
.preloader:after {
    content:"";
    position:fixed;
    width:50%;
    height:100%;
    background:#FFF;
    z-index:2;
    right:0;
    top:0;
    -webkit-transition:0.72s ease transform 0.16s;
    transition:0.72s ease transform 0.16s;
}
body[data-loading="false"] .preloader {
    visibility:hidden;
    -webkit-transition:0.01s visibility 0.88s;
    transition:0.01s visibility 0.88s;
}
body[data-loading="false"] .preloader:before {
    -webkit-transform:translateX(-100%);
            transform:translateX(-100%);
}
body[data-loading="false"] .preloader:after {
    -webkit-transform:translateX(100%);
            transform:translateX(100%);
}
.preloader-icon {
  width:52px;
  height:52px;
  z-index:3;
  -webkit-transition:0.16s ease opacity;
  transition:0.16s ease opacity;
}
body[data-loading="false"] #g1 line {
    -webkit-animation-play-state:paused;
            animation-play-state:paused;
}
body[data-loading="false"] #g2 line {
    -webkit-animation-play-state:paused;
            animation-play-state:paused;
}
body[data-loading="false"] .preloader-icon {
    -webkit-animation-play-state:paused;
            animation-play-state:paused;
    opacity:0;
}
.preloader-icon line {
  stroke-dasharray:40px;
  stroke-dashoffset:40px;
}
#g1 line {
  -webkit-animation:2s animateLoader infinite;
          animation:2s animateLoader infinite;
}
#g2 line {
  -webkit-animation:2s animateLoader infinite 1s;
          animation:2s animateLoader infinite 1s;
}
.preloader-icon {
  -webkit-animation:4s rotate infinite;
          animation:4s rotate infinite;
}
@-webkit-keyframes animateLoader {
  0% {
    stroke-dashoffset:40px;
    stroke-dasharray:40px;

  }
  50% {
    stroke-dashoffset:0px;
    stroke-dasharray:40px;

  }
  100% {
    stroke-dashoffset:80px;
    stroke-dasharray:40px;

  }
}
@keyframes animateLoader {
  0% {
    stroke-dashoffset:40px;
    stroke-dasharray:40px;

  }
  50% {
    stroke-dashoffset:0px;
    stroke-dasharray:40px;

  }
  100% {
    stroke-dashoffset:80px;
    stroke-dasharray:40px;

  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform:rotate(0deg);
            transform:rotate(0deg)
  }
  50% {
    -webkit-transform:rotate(90deg);
            transform:rotate(90deg)
  }
  100% {
    -webkit-transform:rotate(180deg);
            transform:rotate(180deg)
  }
}
@keyframes rotate {
  0% {
    -webkit-transform:rotate(0deg);
            transform:rotate(0deg)
  }
  50% {
    -webkit-transform:rotate(90deg);
            transform:rotate(90deg)
  }
  100% {
    -webkit-transform:rotate(180deg);
            transform:rotate(180deg)
  }
}
/* NAVIGATION */
nav {
    display:-webkit-box;
    display:flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align:center;
            align-items:center;
    height:70px;
    width:100%;
    position:absolute;
    z-index:1;
    -webkit-transition:0.3s ease transform;
    transition:0.3s ease transform;
}
.fixed-top {
    position: fixed;
    background: #FFF;
    box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.05);
    width: 100%;
}
ul {
    list-style-type: none;
    width: 30%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: space-evenly;
            justify-content: space-evenly;
    padding-left:30px;
    height:70px;
}
li {
    display:inline-block;
}
.nav-link {
    position:relative;
    padding:15px 0px;
    display:-webkit-box;
    display:flex;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
}
.active {
    font-weight:700;
}
.navbar-left {
    background:#FFF;
}
@media screen and (min-width:769px) {
    .nav-link:before,.nav-link:after {
        content:"";
        position:absolute;
        width:50%;
        top:57px;    
        height:2px;
        background:#000;
        width:0%;
        opacity:0;
        -webkit-transition:0.16s ease;
        transition:0.16s ease;
    }
    .nav-link:before {
        right:50%;
    }
    .nav-link:after {
        left:50%;
    }
    .navbar-left .nav-link:hover:before {
        width:50%;
        opacity:1;
    }
    .navbar-left .nav-link:hover:after {
        width:50%;
        opacity:1;
    }
}
.navbar-right {
    background: transparent;
    width:20%;
    padding-left:0px;
}
.brand {
    display:block;
    color: var(--brand-color);
}
svg {
    width: 1.25rem;
    height: 1.25rem;  
}
#shop-icon,#user-icon {
    fill:var(--brand-color);
}
.navbar-burger-btn span {
    position: absolute;
    left:0px;
    width: 20px;
    height: 2px;
    background: #000;
    border-radius:2px;
    -webkit-transition:0.24s ease all;
    transition:0.24s ease all; 
}
.navbar-burger-btn span:first-child {
    top:3px;
}
.navbar-burger-btn span:nth-child(2) {
    top:9px;
}
.navbar-burger-btn span:nth-child(3) {
    top:15px;
}
.navbar-burger-btn {
    display:none;
    position: absolute;
    top: 25px;
    left: 30px;
    width: 20px;
    height: 20px;
    padding:0;
    margin:0;
    z-index:1;
}
@media screen and (max-width:768px) {
    :root {
        --brand-color:#000 !important;
    }
    nav {
        background: white;
        box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.05);
        -webkit-transition: 0.24s ease height,0.3s ease transform;
        transition: 0.24s ease height,0.3s ease transform;
    }
    .navbar-burger-btn {
        display:block;
    }
    .navbar-left {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        -webkit-box-pack: start;
                justify-content: start;
        -webkit-box-align: start;
                align-items: start;
        background:transparent;
        height:auto;
    }
    .navbar-right {
        width: auto;
        padding-left: 0px;
        position: absolute;
        display: inline-block;
        right: 20px;
        top: 8px;
        height: auto;
        margin:0;
    }
    .brand {
        display:none;
    }
    .navbar-right>li {
        margin:0px 5px;
    }
    nav[data-state="closed"] {
        height:70px;
    }
    nav[data-state="open"] {
        height:260px;
    }
    nav[data-state="closed"] .navbar-left {
        visibility:hidden;
        opacity:0;
    }
    nav[data-state="open"] .navbar-left {
        visibility:visible;
        opacity:1;
        -webkit-transition:0.01s ease visibility, 0.16s ease-in-out opacity 0.08s;
        transition:0.01s ease visibility, 0.16s ease-in-out opacity 0.08s; 
    }
    nav[data-state="open"] .navbar-burger-btn span:first-child {
        -webkit-transform:rotate(225deg);
                transform:rotate(225deg);
        top:9px;
    }
    nav[data-state="open"] .navbar-burger-btn span:nth-child(2) {
        opacity:0;
        width:0%;
    }
    nav[data-state="open"] .navbar-burger-btn span:nth-child(3) {
        -webkit-transform:rotate(-225deg);
                transform:rotate(-225deg);
        top:9px;
    }
}
/* HERO */
canvas {
    position:absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    width:100%;
    height:100%;
    z-index:-1;
}
.hero {
    position:relative;
    height:100vh;
    width: 100vw;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    grid-template-rows:1fr;
}
.container-prev, .container-next {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: end;
            justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    height: calc(100% - 4em);
    padding-bottom: 4em;
}
.container-prev h3, .container-next h3 {
    color: #FFF;
    margin-left: 45px;
    margin-top: 0;
    margin-bottom: 0;
    font-size:1.75rem;
    z-index:1;
    opacity:0;
    -webkit-transform:translateY(20px);
            transform:translateY(20px);
}
.container-prev h3 {
    margin-left: -45px;
}
.container-prev button,.container-next button {
    color:#FFF;
    font-size:1.75rem;
    opacity:0;
    -webkit-transform:translateY(20px);
            transform:translateY(20px);
}
.container-prev button:before,.container-next button:before {
    content:"";
    position:absolute;
    top:16px;
    width:30px;
    height:3px;
    background:#FFF;
    -webkit-transition:0.16s ease;
    transition:0.16s ease;
}
.container-prev button:before {
    left:-50px;
}
.container-next button:before {
    right:-50px;
}
.container-prev button:after,.container-next button:after {
    content:"";
    position:absolute;
    top:11px;
    width:7px;
    height:7px;
    border-width:3px;
    border-style:solid;
    border-color:transparent transparent #FFF #FFF;
    -webkit-transform:rotate(45deg);
            transform:rotate(45deg);
    border-radius:4px;
    -webkit-transition:0.16s ease;
    transition:0.16s ease;
}
.container-prev button:after {
    left:-50px;
}
.container-next button:after {
    right:-50px;
    -webkit-transform:rotate(-135deg);
            transform:rotate(-135deg);
}
.container-prev button:hover:before {
    -webkit-transform:translateX(-10px);
            transform:translateX(-10px);
}
.container-prev button:hover:after {
    -webkit-transform:translateX(-10px) rotate(45deg);
            transform:translateX(-10px) rotate(45deg);
}
.container-next button:hover:before {
    -webkit-transform:translateX(10px);
            transform:translateX(10px);
}
.container-next button:hover:after {
    -webkit-transform:translateX(10px) rotate(-135deg);
            transform:translateX(10px) rotate(-135deg);
}
body[data-loading="false"] .container-prev h3,body[data-loading="false"] .container-next h3 {
    opacity:1;
    -webkit-transform:translateY(0px);
            transform:translateY(0px);
    -webkit-transition:0.32s cubic-bezier(0.4, 0, 0.2, 1) all .56s;
    transition:0.32s cubic-bezier(0.4, 0, 0.2, 1) all .56s;
}
body[data-loading="false"] .container-prev button,body[data-loading="false"] .container-next button {
    opacity:1;
    -webkit-transform:translateY(0px);
            transform:translateY(0px);
    -webkit-transition:0.32s cubic-bezier(0.4, 0, 0.2, 1) all .56s;
    transition:0.32s cubic-bezier(0.4, 0, 0.2, 1) all .56s;
}
/* INFO */
.info {
    padding-top:90px;
    padding-bottom:45px;
}
.info h3 {
    text-align:center;
}
.info-text-dots {
    margin:1.5rem auto;
    letter-spacing:1.7px;
    font-size:1.25rem;
    text-align:center;
}
.info-text-small {
    font-size:1rem;
    text-align:center;
}
.info-ul {
    margin: auto;
    padding-left: 0;
    height:auto;
}
.info-ul>li>a>svg {
    width:1.25rem;
    height:1.25rem;
}
#share-icon,#fb-icon,#ig-icon {
    fill:#000;
}
.border-right {
    border-right:2px solid black;
}
@media screen and (max-width:795px) {
    .border-right {
        border-right:none;
    }
}
/* ARRIVALS*/
.arrivals-grid {
    grid-template-areas: 
    'arrival-text arrival-img1 arrival-img2'
    'arrival-text arrival-img1 arrival-img3';
    grid-template-columns: repeat(auto-fit,minmax(365px,0.5fr));
}
.arrivals-grid .grid-item:first-child {
    grid-area:arrival-text;
}
.arrivals-grid .grid-item:nth-child(2) {
    grid-area:arrival-img1;
}
.arrivals-grid .grid-item:nth-child(3) {
    grid-area:arrival-img2;
}
.arrivals-grid .grid-item:nth-child(4) {
    grid-area:arrival-img3;
}
@media screen and (max-width:810px) {
    .arrivals-grid {
        grid-template-areas:
            'arrival-img1'
            'arrival-text'
            'arrival-img2'
            'arrival-img3';
        grid-template-columns: repeat(auto-fit,minmax(365px,1fr));
    }
}
@media screen and (max-width:768px) {
    .arrivals-grid {
        grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    }
}
/* FAHSION */
/* QUOTE */
.quote .container {
    text-align:left;
}
.quote h3 {
    position: relative;
    text-indent:30px;
}
.quote h3:before {
    content: "";
    position: absolute;
    width: 300px;
    height: 2px;
    background: lightgrey;
    top: 60px;
    left:0;
}
.quote h3:after {
    content: "";
    position: absolute;
    width: 20px;
    background: #000;
    height: 2px;
    left: 0;
    top: 12px;
}
.quote p {
    margin:4em 0;
    font-style:italic;
    font-size:1.25rem;
    line-height:1.8;
}
/* MODERN */
.modern h3 {
    text-align: left;
}
.modern-grid {
    grid-template-areas:
        'img1 img2 img2'
        'img1 text text';
}
.modern-grid .grid-item:first-child {
    grid-area:img1;
}
.modern-grid .grid-item:nth-child(2) {
    grid-area:img2;
}
.modern-grid .grid-item:nth-child(3) {
    grid-area:text;
}
@media screen and (max-width:810px) {
    .modern-grid {
    grid-template-areas:
        'img1'
        'text'
        'img2';
}
}
/* ANIMATION / OBSERVER STYLES */ 
.fade-in {
    opacity:0;
    -webkit-transform:translateY(50px);
            transform:translateY(50px);
    -webkit-transition:0.35s ease-in-out opacity,0.45s ease-in transform;
    transition:0.35s ease-in-out opacity,0.45s ease-in transform;
}
.visible {
    -webkit-transform:translateY(0px);
            transform:translateY(0px);
    opacity:1
}
/* lazy load */
.img-lazy {
    -o-object-fit: cover;
       object-fit: cover; 
    -webkit-transition:0.2s ease transform,0.2s ease filter,0.32s ease opacity; 
    transition:0.2s ease transform,0.2s ease filter,0.32s ease opacity;
    width:100%;  
    position:absolute;
    z-index:1;  
    opacity:0;
}
.loaded {
    opacity:1;
}
.img-container {
  position:relative;
  overflow:hidden;
  display: -webkit-box;
  display: flex;
  width:100%;
  height:100%;
}
.img-container:hover .img-lazy {
    -webkit-transform:scale3d(1.1,1.1,1.1);
            transform:scale3d(1.1,1.1,1.1);
    -webkit-filter:blur(10px);
            filter:blur(10px);
}
.placeholder-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    z-index: 3;
}
.img-placeholder {
    z-index:3;
}
.placeholder-container:before {
    content: "";
    position: absolute;
    top: 0;
    left:0;
    height:100%;
    width:50%;
    background: #FFFFFF;
    -webkit-transition: 0.4s ease transform 0.16s;
    transition: 0.4s ease transform 0.16s;
}
.placeholder-container:after {
    content: "";
    position: absolute;
    bottom: 0;
    right:0;
    height:100%;
    width:50%;
    background: #FFFFFF;
    -webkit-transition: 0.4s ease transform 0.16s;
    transition: 0.4s ease transform 0.16s;
}
.placeholder-container[data-visible="false"].placeholder-container{
   visibility:hidden;
   -webkit-transition:0.01s ease visibility 0.56s;
   transition:0.01s ease visibility 0.56s;
}
.placeholder-container[data-visible="false"].placeholder-container:after {
   -webkit-transform:translateX(100%);
           transform:translateX(100%);
}
.placeholder-container[data-visible="false"].placeholder-container:before{
   -webkit-transform:translateX(-100%);
           transform:translateX(-100%);
}
.placeholder-container[data-visible="false"] .img-placeholder {
  opacity:0;
  visibility:hidden;
  -webkit-transition:0.16s ease opacity;
  transition:0.16s ease opacity;
}
.img-overlay {
    position: absolute;
    background: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    color: #FFF;
    opacity:0;
    -webkit-transition:0.2s ease opacity,0.3s -webkit-transform;
    transition:0.2s ease opacity,0.3s -webkit-transform;
    transition:0.2s ease opacity,0.3s transform;
    transition:0.2s ease opacity,0.3s transform,0.3s -webkit-transform;
    z-index:2;
}
.img-overlay a {
    position:relative;   
}
.img-overlay a:after {
    content:"";
    position:absolute;
    bottom:-4px;
    left:0;
    width:0%;
    height:2px;
    background:#FFF;
    -webkit-transition:0.2s ease ;
    transition:0.2s ease ;
}
.img-overlay span {
    display:inline-block;
    font-size:1.5rem;
    opacity:0;
    -webkit-transform:translateY(6px);
            transform:translateY(6px);
    -webkit-transition:0.2s ease;
    transition:0.2s ease;
    -webkit-transform-origin:50% 50%;
            transform-origin:50% 50%;
}
.img-container:hover .img-overlay {
    opacity:1;
}
.img-container:hover .img-overlay span {
    opacity:1;
    -webkit-transform:translateY(0px);
            transform:translateY(0px);   
}
.img-container:hover .img-overlay span:nth-child(2){
    -webkit-transition-delay:0.08s;
            transition-delay:0.08s;
}
.img-container:hover .img-overlay span:nth-child(3){
    -webkit-transition-delay:0.12s;
            transition-delay:0.12s;
}
.img-container:hover a:after {
    width:100%;
}
</style>

</head>

<body data-loading="true">
<div class="preloader">
<svg version="1.1" class="preloader-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<g id="g2">
<line fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="1" y1="27.316" x2="24.684" y2="51" />
<line fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="51" y1="24.684" x2="27.316" y2="1" />
</g>
<g id="g1">
<line fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="24.684" y1="1" x2="1" y2="24.684" />
<line fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="27.316" y1="51" x2="51" y2="27.316" />
</g>
</svg>
</div>
<nav data-state="closed">
<button class="navbar-burger-btn" aria-expanded="false" aria-label='menu toggle button'>
<span></span>
<span></span>
<span></span>
</button>
<ul class="navbar-left">
<li><a class="nav-link active" href="#">Shop</a></li>
<li><a class="nav-link" href="#">Blog</a></li>
<li><a class="nav-link" href="#">About</a></li>
</ul>
<ul class="navbar-right">
<li><a href="#" class="nav-link brand">DressIT</a></li>
<li><a href="#" class="nav-link">
<svg viewBox="0 0 24 24">
<use xlink:href="#shop-icon" x="0" y="0">
</svg>
</a></li>
<li><a href="#" class="nav-link">
<svg viewBox="0 0 24 24">
<use xlink:href="#user-icon" x="0" y="0">
</svg>
</a></li>
</ul>
</nav>
<header>
<div class="hero" data-images='["https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/dressit1.jpg","https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/dressit2.jpg"]'>
<div class="container-prev">
<h3>Winter / 2020</h3>
<button class="btn-prev">Collection</button>
</div>
<div class="container-next">
<h3>Spring / 2020</h3>
<button class="btn-next">Collection</button>
</div>
</div>
</header>
<main>
<section class="info fade-in">
<div class="grid-container">
<div class="grid-item border-right">
<h3>COLLABORATION</h3>
<p class="info-text-dots">...</p>
<a href="#" class="info-text-small">OUR PURPOSE</a>
</div>
<div class="grid-item">
<h3>NEWS</h3>
<p class="info-text-dots">...</p>
<a href="#" class="info-text-small">OUR BLOG</a>
</div>
<div class="grid-item">
<h3>SOCIAL-MEDIA</h3>
<p class="info-text-dots">...</p>
<ul class="info-ul">
<li>
<a href="#">
<svg viewBox="0 0 24 24">
<use xlink:href="#share-icon" x="0" y="0">
</svg>.........完整代码请登录后点击上方下载按钮下载查看