一个div布局实现一个书桌效果-html代码-BFW代码库

一个div布局实现一个书桌效果

代码语言：html

代码描述：一个div布局实现一个书桌效果

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


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

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
}

*::before,
*::after {
  position: absolute;
  content: "";
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.shelf {
  top: 72vh;
  width: 20.8em;
  height: 16em;
  background: linear-gradient(#5D1E20 0.03em, transparent 0.05em), linear-gradient(75deg, transparent 40%, #9D5B4B 41% 68%, transparent 66%) 5% 0em/3.2em 4em, linear-gradient(-75deg, transparent 40%, #9D5B4B 41% 68%, transparent 66%) 95% 0em/3.2em 4em, linear-gradient(75deg, transparent 50%, #5D1E20 51%) 5% 0/2.9em 4em, linear-gradient(-75deg, transparent 50%, #5D1E20 51%) 95% 0/2.9em 4em;
  background-repeat: no-repeat;
  box-shadow: 0 -1.6em 0 #9D5B4B, 19.7em -6em 0 #fff, 6.7em -9.6em 0 -6.6em #6438B2, 6.9em -10.6em 0 -6.6em #00A1A9, 6.9em -11.6em 0 -6.6em #82ba33;
}
.shelf:before {
  z-index: -1;
  height: 8em;
  width: 2em;
  left: 1em;
  bottom: 17.5em;
  background: #ED4135;
  box-shadow: 1.9em 0 #ED4135, 3.1em 0.4em 0 -0.2em #82ba33, 2.7em -0.3em 0 0.2em white, 4em -0.2em 0 0.2em #333333, 6.6em 0 0 0.4em #438a5e, 8em 0 0 #fff, 7em 0 0 1em white, 8.4em 0 0 1em #6438B2, 10.6em 0.4em 0 -0.4em #F5AD00;
}
.shelf:after {
  width: 20em;
  bottom: 17.5em;
  height: 9em;
  background: linear-gradient(to right, transparent 1em, rgba(255, 255, 255, 0.1) 1.6em 1.8em, transparent 2em 3.4em, rgba(255, 255, 255, 0.1) 3.6em 3.8em, transparent 3.9em 5em, rgba(255, 255, 255, 0.1) 5.1.........完整代码请登录后点击上方下载按钮下载查看