一个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.1em 5.35em, transparent 5.4em 6.1em, rgba(255, 255, 255, 0.1) 6.3em 6.4em, transparent 6.6em 8em, rgba(255, 255, 255, 0.1) 8.2em 8.3em, transparent 8.4em 10.2em, rgba(255, 255, 255, 0.1) 10.4em 10.5em, transparent 10.6em 11.3em, rgba(255, 255, 255, 0.1) 11.5em 11.6em, transparent 11.8em 12.3em, rgba(255, 255, 255, 0.1) 12.5em 12.7em, transparent 12.8em), linear-gradient(transparent 0.3em, rgba(255, 255, 255, 0.1) 0.5em 0.7em, transparent 0.8em 1.3em, rgba(255, 255, 255, 0.1) 1.5em 1.7em, transparent 1.9em 2.6em, rgba(255, 255, 255, 0.1) 2.8em 3em, transparent 3.2em) 13.3em 5.5em/6.4em 4em, linear-gradient(to bottom, transparent 1.7em, #95160d 1.7em 2.4em, transparent 2.1em 5.8em, #95160d 5.8em 6.5em, transparent 6.5em) 1em 1em/1.9em 9em, linear-gradient(to bottom, transparent 1em, #95160d 1em 1.2em, transparent 1.2em.........完整代码请登录后点击上方下载按钮下载查看