js实现三维房间404页面效果代码-html代码-BFW代码库

js实现三维房间404页面效果代码

代码语言：html

所属分类：三维

代码描述：js实现三维房间404页面效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta charset="UTF-8">
    <title>Hello 404!.</title>
<style>
    
 ::-webkit-scrollbar {
    width: 5px;
    /*对垂直流动条有效*/
    height: 5px;
    /*对水平流动条有效*/
}
/*定义滚动条的轨道颜色、内阴影及圆角*/

::-webkit-scrollbar-track {
    /* background-color: rgba(50, 50, 50, 0.1); */
    background-color: transparent;
    border-radius: 5px;
}
/*定义滑块颜色、内阴影及圆角*/

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.2);
}
/*定义两端按钮的样式*/

::-webkit-scrollbar-button {
    background-color: transparent;
}
/*定义右下角汇合处的样式*/

::-webkit-scrollbar-corner {
    background: transparent;
}

html {
   touch-action: none;
   content-zooming: none;
}

body {
   position: fixed;
   margin: 0;
   padding: 0;
   background: #000;
   width: 100%;
   height: 100%;
   color: white;
}

#screen {
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background: #aaa;
   user-select: none;
   overflow: hidden;
}

#scene {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0;
   height: 0;
   transform: translateZ(1000px);
   -webkit-transform: translateZ(1000px);
}

#scene .side {
   position: absolute;
   visibility: hidden;
   margin: -300px -500px;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   display: inline-block;
   width: 1000px;
   height: 600px;
   cursor: move;
   background: #111 url(//repo.bfw.wiki/bfwrepo/image/61505120be212.png);
   background-size: cover;
}
#scene .top, 
#scene .bottom{
   margin: -500px -500px!important;
   width: 1000px!important;
   height: 1000px!important;
}
#scene .bottom{
   background: #111 url(//repo.bfw.wiki/bfwrepo/image/61505147d39b3.png);
   background-size: cover;
   text-align: center;
}
#scene .top{
   background: #111 url(//repo.bfw.wiki/bfwrepo/image/61505136929a0.png);
   background-size: cover;
}
.bottom .head{
   text-align: center;
}
.bottom .head img{
   width: 120px;
   border-radius: 20px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.8);
}
.bottom .user{
   margin-top: 100px;
   background-color: rgba(0,0,0,0.3);
   display: inline-block;
   border-radius: 20px;
   padding: 80px 100px;
}
.bottom .name{
   text-align: center;
   font-size:32px;
   margin-top: 20px;
   text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}
.bottom .bio{
   text-align: center;
   font-size:14px;
   margin-top: 5px;
  .........完整代码请登录后点击上方下载按钮下载查看