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: 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; background-color: #9d7f63; -webkit-transform: skewY(25deg); transform: skewY(25deg); } .case__label { position: absolute; top: -12px; left: 5px; width: 10px; height: 7px; background-color: #9d7f63; -webkit-transform: skewY(25deg); transform: skewY(25deg); } .case__label_left { top: -12px; left: 5px; } .case__label_right { top: 12px; left: 55px; } .case__top { position: absolute; top: 0; left: 2px; width: 70px; height: 4px; background-image: -webkit-gradient(linear, left bottom, left top, from(#e9eceb), color-stop(50%, #a3bab4), to(#e9eceb)); background-image: linear-gradient(to top, #e9eceb, #a3bab4 50%, #e9eceb); -webkit-transform: skewY(25deg) skewX(-45deg); transform: skewY(25deg) skewX(-45deg); } .case__right { position: absolute; top: 18px; left: 69px; width: 5px; height: 55px; background-image: -webkit-gradient(linear, right top, left top, from(#e9eceb), color-stop(50%, #a3bab4), to(#e9eceb)); background-image: linear-gradient(to left, #e9eceb, #a3bab4 50%, #e9eceb); -webkit-transform: skewY(-25deg); transform: skewY(-25deg); } .case__number { position: absolute; top: 41px; left: 10px; color: #7c664e; font-size: 8px; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(-66deg) skewY(-25deg); transform: rotate(-66deg) skewY(-25deg); } .glow { position: absolute; } .glow__bottom { position: absolute; top: 60px; left: 5px; width: 135px; height: 120px; background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(132, 255, 242, 1)), color-stop(30%, rgba(132, 255, 242, 1)), to(rgba(132, 255, 242, 0))); background-image: linear-gradient(to top, rgba(132, 255, 242, 1), rgba(132, 255, 242, 1) 30%, rgba(132, 255, 242, 0)); -webkit-transform: perspective(120px) rotateX(-20deg); transform: perspective(120px) rotateX(-20deg); } .glow__top { position: absolute; top: -25px; left: 7px; width: 130px; height: 180px; background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(132, 255, 242, 1)), color-stop(20%, rgba(132, 255, 242, 1)), to(rgba(132, 255, 242, 0))); background-image: linear-gradient(to top, rgba(132, 255, 242, 1), rgba(132, 255, 242, 1) 20%, rgba(132, 255, 242, 0)); -webkit-transform: perspective(150px) rotateX(-20deg); transform: perspective(150px) rotateX(-20deg); } .glow__ball { position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 10px; background-color: #83fff2; -webkit-transform: translateY(160px); transform: translateY(160px); } .glow__ball_1 { -webkit-animation: 5s fadeUp infinite; animation: 5s fadeUp infinite; -webkit-animation-delay: .5s; animation-delay: .5s; } .glow__ball_2 { left: 10px; width: 5px; height: 5px; -webkit-animation: 4s fadeUp infinite; animation: 4s fadeUp infinite; -webkit-animation-delay: .8s; animation-delay: .8s; } .glow__ball_3 { left: 24px; width: 15px; height: 15px; -webkit-animation: 9s fadeUp infinite; animation: 9s fadeUp infinite; -webkit-animation-delay: .65s; animation-delay: .65s; } .glow__ball_4 { left: 34px; width: 8px; height: 8px; -webkit-animation: 7s fadeUp infinite; animation: 7s fadeUp infinite; -webkit-animation-delay: .5s; animation-delay: .5s; } .glow__ball_5 { left: 57px; width: 14px; height: 14px; -webkit-animation: 7s fadeUp infinite; animation: 7s fadeUp infinite; -webkit-animation-delay: .9s; animation-delay: .9s; } .glow__ball_6 { left: 78px; width: 11px; height: 11px; -webkit-animation: 3s fadeUp infinite; animation: 3s fadeUp infinite; -webkit-animation-delay: .3s; animation-delay: .3s; } .glow__ball_7 { left: 91px; width: 13px; height: 13px; -webkit-animation: 8s fadeUp infinite; animation: 8s fadeUp infinite; -webkit-animation-delay: .77s; animation-delay: .77s; } .glow__ball_8 { left: 105px; width: 7px; height: 7px; -webkit-animation: 6s fadeUp infinite; animation: 6s fadeUp infinite; -webkit-animation-delay: .4s; animation-delay: .4s; } .glow__ball_9 { left: 113px; width: 8px; height: 8px; -webkit-animation: 4s fadeUp infinite; animation: 4s fadeUp infinite; -webkit-animation-delay: .6s; animation-delay: .6s; } .glow__ball_10 { left: 120px; width: 4px; height: 4px; -webkit-animation: 9s fadeUp infinite; animation: 9s fadeUp infinite; -webkit-animation-delay: .92s; animation-delay: .92s; } .numbers { position: absolute; top: 0; left: 122px; color: #fff; font-family: 'Roboto', sans-serif; font-size: 200px; display: -webkit-box; display: -ms-flexbox; display: flex; } .numbers__item { margin: 0 10px; -webkit-animation: 5s bounceUpDown infinite; animation: 5s bounceUpDown infinite; } .numbers__item_1 { -webkit-animation-delay: .3s; animation-delay: .3s; } .numbers__item_2 { -webkit-animation: 5.4s bounceUpDown infinite; animation: 5.4s bounceUpDown infinite; -webkit-animation-delay: .5s; animation-delay: .5s; } .numbers__item_3 { -webkit-animation-delay: .3s; animation-delay: .3s; } @-webkit-keyframes fadeUp { 0% { -webkit-transform: translateY(160px); transform: translateY(160px); opacity: 1; } 60% { opacity: 1; } 100% { -webkit-transform: translateY(-10px); transform: translateY(-10px); opacity: 0; } } @keyframes fadeUp { 0% { -webkit-transform: translateY(160px); transform: translateY(160px); opacity: 1; } 60% { opacity: 1; } 100% { -webkit-transform: translateY(-10px); transform: translateY(-10px); opacity: 0; } } @-webkit-keyframes bounceUpDown { 0, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(50px); transform: translateY(50px); } } @keyframes bounceUpDown { 0, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(50px); transform: translateY(50px); } } @media screen and (max-width: 800px) { .composition { -webkit-transform: scale(0.8); transform: scale(0.8); } } @media screen and (max-width: 700px) { .composition { -webkit-transform: scale(0.7); transform: scale(0.7); } } @media screen and (max-width: 600px) { .composition { -webkit-transform: scale(0.6); transform: scale(0.6); } } @media screen and (max-width: 500px) { .composition { -webkit-transform: scale(0.5); transform: scale(0.5); } } @media screen and (max-width: 400px) { .composition { -webkit-transform: scale(0.4); transform: scale(0.4); } } @media screen and (max-width: 300px) { .composition { -webkit-transform: scale(0.3); transform: scale(0.3); } }</style> </head><body > <div class="wrapper"> <div class="composition"> <div class="layer-0 shelf"> <div class="shelf__side_left"></div> <div class="shelf__side_bottom"></div> <div class="case case_1"> <div class="case__front"></div> <div class="case__top"></div> <div class="case__label case__label_right"></div> <div class="case__right"></div> <div class="case__number"> №2428506 </div> </div> <div class="case case_2"> <div class="case__front"></div> <div class="case__top"></div> <div class="case__label case__label_left"></div> <div class="case__right"></div> <div class="case__number"> №2428506 </div> </div> <div class="case case_3"> <div class="case__front"></div> <div class="case__top"></div> <div class="case__label case__label_right"></div> <div class="case__right"></div> <div class="case__number"> №2428506 </div> </div> <div class="case case_4"> <div class="case__front"></div> <div class="case__top"></div> <div class="case__label case__label_left"></div> <div class="case__right"></div> <div class="case__number"> №2428506 </div> </div> <div class="case case_5"> <div class="case__front"></div> <div class="case__top"></div> <div class="case__label case__label_left"></div> <div class="case__right"></div> <div class="case__number"> №2428506 </div> </div> <div class="case case_6"> <div class="case__front"></div> <div class="case__top"></div> <div class="case__label case__label_right"></div> <div class="case__right"></div> <div class="case__number"> №2428506 </div> </div> <div class="case case_7"> <div class="case__front"></div> <div class="case__top"></div> <div class="case__label case__label_left"></div> <div class="case__right"></div> <div class="case__number"> №2428506 </div> </div> <div class="case case_8"> <div class="case__front"></div> <div class="case__top"></div> <div class="case__label case__label_left"></div> <div class="case__right"></div> <div class="case__number"> №2428506 </div> </div> <div class="case case_9"> <div class="case__front"></div> <div class="case__top"></div> <div class="case__label case__label_left"></div> <div class="case__right"></div> <div class="case__number"> №2428506 </div> </div> <div class="case case_10"> <div class="case__front"></div> <div class="case__top"></div> <div class="case__label case__label_left&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0