单个div+css实现一个商铺商店效果代码-html代码-BFW代码库

代码语言：html
代码描述：单个div+css实现一个商铺商店效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
/* Presets */
*, *:before, *:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  /* font */
  --font: Inter, serif;
  /* colors */
  --white: #FFFFFF;
  --light-off-white: #FAEEE2;
  --off-white: #F5E0C3;
  --lightest-gray: #F1F1FB;
  --light-gray: #C9CACD;
  --dark-gray: #BBBBBB;
  --shadow-gray: #CCC7CE;
  --black: #333333;
  --tan: #CC8C5C;
  --other-tan: #FAAE3D;
  --light-brown: #A0763A;
  --darker-brown: #7D5924;
  --darkest-brown: #45260B;
  --red: #FE583A;
  --shadow-red: #D54B36;
  --blood-red: #D82C2E;
  --yellow: #FCE57E;
  --shadow-yellow: #D1BD6A;
  --dark-yellow: #E2A642;
  --darkest-yellow: #AD6322;
  --dark-aqua: #A4C9D3;
  --light-aqua: #C5DEE2;
  /*dimensions */
  --width: 70vh;
  --height: 80vh;
  --l-space: calc(var(--width) / 20);
  --wideness: calc(var(--width) - (2 * var(--l-space)));
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(#EACC7D, #E3DED1);
}

div:before, div:after {
  display: block;
  content: "";
  position: absolute;
}

div.meaty {
  width: var(--width);
  height: var(--height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: end;
  /* placements */
  --meat-logo:

    /* meat */ radial-gradient(circle, var(--off-white) 1vh, transparent 1vh) 28.25vh 8.5vh / 2vh 2vh no-repeat,
    /* meat */ radial-gradient(circle, var(--blood-red) 4vh, transparent 4vh) 25vh 5vh / 9vh 9vh no-repeat,
    /* meat */ radial-gradient(circle, var(--off-white) 4.5vh, transparent 4.5vh) 24.5vh 4.5vh / 10vh 10vh no-repeat,
    /* meat */ radial-gradient(ellipse, var(--tan) 7.75vh, transparent 7.75vh) 25vh 4.75vh / 15vh 9vh no-repeat,
    /* meat */ radial-gradient(circle, var(--off-white) 1vh, transparent 1vh) 41.5vh 7.5vh / 2vh 2vh no-repeat,
    /* meat */ radial-gradient(circle, var(--off-white) 1vh, transparent 1vh) 41.5vh 9.25vh / 2vh 2vh no-repeat,
  /* sign-base */ linear-gradient( var(--off-white) 100%, transparent 2vh) 38vh 8.75vh / 4vh 1.5vh no-repeat;
  --roofsign:
  /* sign-top */ radial-gradient(ellipse, var(--darker-brown) 14vh, transparent 14vh) 17vh -1vh / 36vh 26vh no-repeat,
  /* sign-base */ linear-gradient( var(--darker-brown) 100%, transparent 2vh) 10vh 14.5vh /50vh 7.5vh no-repeat,
  /* sign-base */ linear-gradient( var(--light-brown) 100%, transparent 2vh) 10vh 13vh / 50vh 10vh no-repeat,
  /* sign-base-l */ linear-gradient(-65deg, var(--darker-brown) 7vh, transparent 7vh) 2.5vh 14.5vh / 10vh 7.5vh no-repeat,
  /* sign-base-l */ linear-gradient(-65deg, var(--light-brown) 7vh, transparent 7vh) 0vh 13vh / 10vh 10vh no-repeat,
  /* sign-base-l */ linear-gradient(65deg, var(--darker-brown) 7vh, transparent 7vh) 57.5vh 14.5vh / 10vh 7.5vh no-repeat,
  /* sign-base-r */ linear-gradient(65deg, var(--light-brown) 7vh, transparent 7vh) 60vh 13vh / 10vh 10vh no-repeat,
  /* button1 */ radial-gradient(circle, var(--light-brown) 1vh, transparent 1vh) 12vh 23.5vh / 2vh 2vh no-repeat,
  /* button1 */ radial-gradient(circle, var(--light-brown) 1vh, transparent 1vh) 26vh 23.5vh / 2vh 2vh no-repeat,
  /* button1 */ radial-gradient(circle, var(--light-brown) 1vh, transparent 1vh) 40vh 23.5vh / 2vh 2vh no-repeat,
  /* button1 */ radial-gradient(circle, var(--light-brown) 1vh, transparent 1vh) 54vh 23.5vh / 2vh 2vh no-repeat,
  /* sign-bottom */ linear-gradient( var(--darkest-brown) 100%, transparent 2vh) 2vh 23vh / 66vh 3vh no-repeat,
  /* sign-top */ radial-gradient(ellipse, var(--light-brown) 15vh, transparent 15vh) 15vh -3vh / 40vh 30vh no-repeat;
  --window:
  /* window-r-shadow1 */ linear-gradient(115deg, var(--dark-aqua) 6vh, transparent 6vh) 9.5vh 39vh / 12vh 15vh no-repeat,
  /* window-r-shadow2 */ linear-gradient(-65deg, var(--dark-aqua) 5vh, transparent 5vh) 11.5vh 40vh / 12vh 15vh no-repeat,
  /* window-l */ linear-gradient( var(--light-aqua) 100%, transparent 100%) 9.5vh 39vh / 14vh 16vh no-repeat,
  /* window-r-shadow1 */ linear-gradient(115deg, var(--dark-aqua) 6vh, transparent 6vh) 25.5vh 39vh / 12vh 15vh no-repeat,
  /* window-r-shadow2 */ linear-gradient(-65deg, var(--dark-aqua) 5vh, transparent 5vh) 27.5vh 40vh / 12vh 15vh no-repeat,
  /* window-r */ linear-gradient( var(--light-aqua) 100%, transparent 100%) 25.5vh 39vh / 14vh 16vh no-repeat,
  /* window-frames-r */ linear-gradient( var(--off-white) 100%, transparent 100%) 41.5vh 37vh / .5vh 20vh no-repeat,
  /* window-frames-l */ linear-gradient( var(--shadow-gray) 100%, transparent 100%) 7vh 37vh / .5vh 20vh no-repeat,
  /* window-frames */ linear-gradient( var(--light-brown) 100%, transparent 100%) 7.5vh 37vh / 34.5vh 20vh no-repeat,
  /* upper-base */ linear-gradient( var(--off-white) 100%, transparent 100%) 7vh 35vh / 35vh 2vh no-repeat,
  /* upper-base */ linear-gradient( var(--shadow-gray) 100%, transparent 100%) 7vh 34vh / 35vh 1vh no-repeat,
  /* lower-base */ linear-gradient( var(--off-white) 100%, transparent 100%) 7vh 57vh / 35vh 2vh no-repeat,
  /* lower-base */ linear-gradient( var(--shadow-gray) 100%, transparent 100%) 7vh 59vh / 35vh 1vh no-repeat,
  /* lowest-base */ linear-gradient( var(--darkest-yellow) 100%, transparent 100%) 7vh 60vh / 35vh 2vh no-repeat;
  --door:
  /* open-sign */ linear-gradient(var(--white) 10vh, transparent 10vh) 49vh 50vh / 7vh 4vh no-repeat,
  /* open-sign-frame */ linear-gradient(var(--darker-brown) 10vh, transparent 10vh) 48.75vh 49.75vh / 7.5vh 4.5vh no-repeat,
  /* open-sign-string */ linear-gradient(-45deg, var(--light-aqua) 2vh, transparent 2vh) 48.75vh 46.5vh / 4vh 4vh no-repeat,
  /* open-sign-string */ linear-gradient(-45deg, var(--off-white) 2vh, transparent 2vh) 48.25vh 45.5vh / 4.5vh 4.5vh no-repeat,
  /* open-sign-string */ linear-gradient(45deg, var(--light-aqua) 2vh, transparent 2vh) 52.75vh 46.5vh / 4vh 4vh no-repeat,
  /* open-sign-string */ linear-gradient(45deg, var(--off-white) 2vh, transparent 2vh) 52.75vh 45.5vh / 4.5vh 4.5vh no-repeat,
  /* door-top-shadow1 */ linear-gradient(115deg, var(--dark-aqua) 4vh, transparent 4vh) 48vh 45vh / 12vh 15vh no-repeat,
  /* door-top-shadow2 */ linear-gradient(-65deg, var(--dark-aqua) 5vh, transparent 5vh) 45vh 45vh / 12vh 15vh no-repeat,
  /* door-top */ linear-gradient( var(--light-aqua) 100%, transparent 100%) 48vh 45vh / 9vh 15vh no-repeat,
  /* door-bottom */ linear-gradient( var(--darker-brown) 100%, transparent 100%) 48vh 64vh / 9vh 8vh no-repeat,
  /* door-shadow-l */ linear-gradient( var(--shadow-gray) 100%, transparent 100%) 44.5vh 41vh / .5vh 34vh no-repeat,
  /* door-shadow-r */ linear-gradient( var(--light-off-white) 100%, transparent 100%) 60vh 41vh / .5vh 34vh no-repeat,
  /* door*/ linear-gradient( var(--darkest-brown) 100%, transparent 100%) 45vh 41vh / 15vh 34vh no-repeat;
  --storefront:
  /* lower-base */ linear-gradient( var(--light-off-white) 100%, transparent 100%) var(--l-space) 71vh / var(--wideness) 4vh no-repeat,
  /* lower-base-shadow */ linear-gradient( var(--off-white) 100%, transparent 100%) var(--l-space) 70vh / var(--wideness) 1vh no-repeat,
  /* yellow-store */ linear-gradient( var(--dark-yellow) 100%, transparent 100%) var(--l-space) 30vh / var(--wideness) 40vh no-repeat;
  --sidewalk:
  /* upper-sidewalk */ linear-gradient( var(--dark-gray) 100%, transparent 100%) var(--l-space) 75vh / var(--wideness) 1vh no-repeat,
  /* curb-crack1*/ linear-gradient( var(--dark-gray) 6rem, transparent 2vh) 20% 100% / 0.25vh 4vh no-repeat,
  /* curb-crack2*/ linear-gradient( var(--dark-gray) 6rem, transparent 2vh) 40% 100% / 0.25vh 4vh no-repeat,
  /* curb-crack3*/ linear-gradient( var(--dark-gray) 6rem, transparent 2vh) 60% 100% / 0.25vh 4vh no-repeat,
  /* curb-crack4*/ linear-gradient( var(--dark-gray) 6rem, transparent 2vh) 80% 100% / 0.25vh 4vh no-repeat,
  /* sidewalk */ linear-gradient( var(--lightest-gray) 100%, transparent 2vh) 3vh 76vh / 64vh 2vh no-repeat,
  /* sidewalk */ linear-gradient(-45deg, var(--lightest-gray) 2vh, transparent 2vh) 0vh 76vh / 3vh 2vh no-repeat,
  /* sidewalk */ linear-gradient(45deg, var(--lightest-gray) 2vh, transparent 2vh) 67vh 76vh / 3vh 2vh no-repeat,
  /* curb */ linear-gradient( var(--light-gray) 100%, transparent 2vh) 0% 100% / 70vh 2vh no-repeat;
  background: var(--meat-logo), var(--roofsign), var(--window), var(--door), var(--storefront), var(--sidewalk);
}

div.meaty:after {
  width: var(--width);
  height: var(--height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  content: "Open";
  color: #990000;
  padding-top: 24vh;
  padding-left: 35v.........完整代码请登录后点击上方下载按钮下载查看