css实现一个抽屉打开光线404错误页面代码-html代码-BFW代码库

css实现一个抽屉打开光线404错误页面代码

代码语言：html

代码描述：css实现一个抽屉打开光线404错误页面代码

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

<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:700');

:root {
  --color-main: #004880;
}

html, body, .wrapper {
  position: relative;
  
  width: 100%;
  height: 100%;
  
  display: -webkit-box;
  
  display: -ms-flexbox;
  
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.composition {
  position: relative;
  
  width: 750px;
  height: 400px;
  
  background-color: var(--color-main);
  background-image: -webkit-gradient(linear, right top, left top, from(#072e61), to(#004880));
  background-image: linear-gradient(to left, #072e61, #004880);
  
  overflow: hidden;
}

.layer-0 {
  position: absolute;
  z-index: 10;
}
.layer-1 {
  position: absolute;
  z-index: 15;
}
.layer-2 {
  position: absolute;
  z-index: 20;
}

.shelf {
  position: absolute;
  top: 150px;
  left: 250px;
}
.shelf__side_left {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 500px;
  height: 60px;
  
  background-color: #cdfffa;
  
  -webkit-transform: skewY(-25deg);
  
          transform: skewY(-25deg);
}
.shelf__side_front {
  position: absolute;
  top: 137px;
  left: 0;
  
  width: 70px;
  height: 60px;
  
  background-color: #9dfbf3;
  background-image: linear-gradient(160deg, #84fff2, #2f7fb2);
  
  border: 1px solid rgba(47, 127, 178, 0.5);
  
  -webkit-transform: skewY(30deg);
  
          transform: skewY(30deg);
}
.shelf__side_bottom {
  position: absolute;
  top: 43px;
  left: 36px;
  
  width: 500px;
  height: 73px;
  
  background-color: #7adbd5;
  
  -webkit-transform: skewY(-25deg) skewX(44deg);
  
          transform: skewY(-25deg) skewX(44deg);
}
.shelf__side_right {
  position: absolute;
  top: 42px;
  left: 70px;
  
  width: 500px;
  height: 60px;
  
  background-color: #0b2f6c;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#0b2f6c), to(#16598b));
  background-image: linear-gradient(0deg, #0b2f6c, #16598b);
  
  -webkit-transform: skewY(-25deg);
  
          transform: skewY(-25deg);
}

.shelf__handle_top {
  position: absolute;
  top: 144px;
  left: 17px;
  
  width: 30px;
  height: 7px;
  
  background-color: #5ac8d3;
  
  -webkit-transform: skewY(30deg) skewX(-50deg);
  
          transform: skewY(30deg) skewX(-50deg)
}
.shelf__handle_front {
  position: absolute;
  top: 149px;
  left: 13px;
  
  width: 30px;
  height: 10px;
  
  background-color: #71e7e4;
  border: 1px solid rgba(47, 127, 178, 0.5);
  
  -webkit-transform: skewY(30deg);
  
          transform: skewY(30deg);
}
.shelf__handle_right {
  position: absolute;
  top: 155px;
  left: 43px;
  
  width: 6px;
  height: 10px;
  
  background-color: #287caa;
  
  -webkit-transform: skewY(-30deg);
  
          transform: skewY(-30deg);
}

.shadow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  
  width: 150px;
  height: 100%;
  
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(1, 20, 61, 0)), color-stop(65%, rgba(1, 20, 61, 0.8)), to(rgba(1, 20, 61, 1)));
  
  background-image: linear-gradient(to right, rgba(1, 20, 61, 0), rgba(1, 20, 61, 0.8) 65%, rgba(1, 20, 61, 1));
}

.case {
  position: absolute;
  
  -webkit-transform: transl.........完整代码请登录后点击上方下载按钮下载查看