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

代码语言:html

所属分类:三维

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

代码标签: 房间 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: 6.........完整代码请登录后点击上方下载按钮下载查看

网友评论0