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

代码语言：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: translateY(0);
  
          transform: translateY(0);
  -webkit-transition: .3s transform ease-in;
  transition: .3s transform ease-in;
}
.case:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}
.case_1 {
  top: -85px;
  right: -470px;
}
.case_2 {
  top: -82px;
  right: -463px;
}
.case_3 {
  top: -79px;
  right: -456px;
}
.case_4 {
  top: -76px;
  right: -449px;
}
.case_5 {
  top: -73px;
  right: -442px;
}
.case_6 {
  top: -70px;
  right: -435px;
}
.case_7 {
  top: -67px;
  right: -428px;
}
.case_8 {
  top: -63px;
  right: -421px;
}
.case_9 {
  top: -59px;
  right: -414px;
}
.case_10 {
  top: -56px;
  right: -407px;
}
.case_11 {
  top: -53px;
  right: -400px;
}
.case_12 {
  top: -49px;
  right: -393px;
}
.case_13 {
  top: -46px;
  right: -386px;
}
.case_14 {
  top: -43px;
  right: -379px;
}
.case_15 {
  top: -39px;
  right: -372px;
}
.case_16 {
  top: -36px;
  right: -365px;
}
.case_17 {
  top: -33px;
  right: -358px;
}
.case_18 {
  top: -29px;
  right: -351px;
}
.case_19 {
  top: -26px;
  right: -344px;
}
.case_20 {
  top: -23px;
  right: -337px;
}
.case_21 {
  top: -19px;
  right: -330px;
}
.case_22 {
  top: -16px;
  right: -323px;
}
.case_23 {
  top: -13px;
  right: -316px;
}
.case_24 {
  top: -9px;
  right: -309px;
}
.case_25 {
  top: -6px;
  right: -302px;
}
.case_26 {
  top: -3px;
  right: -295px;
}
.case_27 {
  top: 1px;
  right: -288px;
}
.case_28 {
  top: 4px;
  right: -281px;
}
.case_29 {
  top: 7px;
  right: -274px;
}
.case_30 {
  top: 11px;
  right: -267px;
}
.case_31 {
  top: 14px;
  right: -260px;
}
.case_32 {
  top: 17px;
  right: -253px;
}
.case_33 {
  top: 20px;
  right: -246px;
}
.case_34 {
  top: 24px;
  right: -239px;
}
.case_35 {
  top: 27px;
  right: -232px;
}
.case_36 {
  top: 30px;
  right: -225px;
}
.case_37 {
  top: 33px;
  right: -218px;
}
.case_38 {
  top: 37px;
  right: -211px;
}
.case_39 {
  top: 40px;
  right: -204px;
}
.case_40 {
  top: 43px;
  right: -197px;
}
.case_41 {
  top: 46px;
  right: -190px;
}
.case_42 {
  top: 49px;
  right: -183px;
}
.case_43 {
  top: 53px;
  right: -176px;
}
.case_44 {
  top: 56px;
  right: -169px;
}
.case_45 {
  top: 59px;
  right: -162px;
}
.case_46 {
  top: 62px;
  right: -155px;
}
.case_47 {
  top: 65px;
  right: -148px;
}

.case__front {
  position: absolute;
  top: 3px;
  left: 0;
  
  width: 70px;
  height: 55px;.........完整代码请登录后点击上方下载按钮下载查看