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

单个div+css实现一个商铺商店效果代码

代码语言：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-b.........完整代码请登录后点击上方下载按钮下载查看