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
















网友评论0