Test3 - HSB Foundation

Test3
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
@import url("https://d3g0gp89917ko0.cloudfront.net/v--3e3a6f7dbcc9/common--theme/base/css/style.css");
 
body {
    margin: 0;
    padding: 0;
    position: relative;
}
 
canvas {
    width: 100%;
    height: 100%;
    position: absolute;
}
 
canvas.disappear {
    animation: disappear ease 0.5s forwards;
}
 
div#floatContainer {
    overflow: hidden;
    position: absolute;
    width: 100vw;
    height: 100vh;
}
 
div.showed,
div.showing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto 0;
    width: 100%;
    height: 100%;
    position: absolute;
    max-width: 100vw;
    max-height: 100vh;
    left: 0;
    top: 0;
}
 
div.content {
    display: none;
    width: 400px;
    max-width: 80%;
    height: 300px;
    max-height: 60%;
    margin: 1rem;
    padding: 1rem;
    box-sizing: padding-box;
    border: solid 2px rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.3);
    overflow: auto;
}
 
a.btnChange {
    display: none;
    padding: 1rem;
    color: #FFF;
    border: solid 2px rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.3);
    text-decoration: none;
}
 
div.showing div.content {
    display: block;
    animation-delay: 0.5s;
    animation: contentAppear ease 0.75s forwards;
}
 
div.showing div.content.thefirst {
    display: block;
    animation-delay: 2.5s;
    animation: contentAppear ease 0.75s forwards;
}
 
div.showing a.btnChange {
    display: inline-block;
}
 
div.showed a.btnChange {
    display: none;
}
 
div.showed div.content {
    animation-delay: 0.5s;
    animation: contentDisappear ease 0.75s forwards;
}
 
@keyframes disappear {
0% {
    opacity: 1;
}
 
100% {
    opacity: 0;
}
}
 
@keyframes contentAppear {
0% {
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    color: transparent;
}
 
30% {
    max-width: 80%;
    max-height: 0;
    overflow: hidden;
    color: transparent;
}
 
80% {
    max-width: 80%;
    max-height: 60%;
    overflow: auto;
    color: transparent;
}
 
100% {
    max-width: 80%;
    max-height: 60%;
    overflow: auto;
    color: #FFF;
}
}
 
@keyframes contentDisappear {
100% {
    position: fixed;
    left: -200vw;
    padding: 0;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    color: transparent;
}
 
99% {
    padding: 0;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    color: transparent;
}
 
70% {
    padding: 0 1rem;
    max-width: 80%;
    max-height: 0;
    overflow: hidden;
    color: transparent;
}
 
20% {
    padding: 1rem;
    max-width: 80%;
    max-height: 60%;
    overflow: auto;
    color: transparent;
}
 
0% {
    max-width: 80%;
    max-height: 60%;
    overflow: auto;
    color: #FFF;
}
}
</style>
<body>
<script src="https://scpsandboxcn.wdfiles.com/local--files/three-js/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.id = 'mainCanvas';
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 2, 3 );
var material = new THREE.MeshLambertMaterial( { color: 0x593781 } );
var cube = new THREE.Mesh( geometry, material );
//scene.add( cube );
 
var geometry1 = new THREE.PlaneGeometry( 5, 5 );
var material1 = new THREE.MeshLambertMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
var plane0 = new THREE.Mesh( geometry1, material1 );
scene.add( plane0 );
plane0.position.set( 0, 0, -2.5 );
 
var plane1 = new THREE.Mesh( geometry1, material1 );
var plane2 = new THREE.Mesh( geometry1, material1 )
var plane3 = new THREE.Mesh( geometry1, material1 );
var plane4 = new THREE.Mesh( geometry1, material1 )
scene.add( plane1 );
scene.add( plane2 );
scene.add( plane3 );
scene.add( plane4 );
plane1.rotation.x = Math.PI / 2
plane2.rotation.x = Math.PI / 2
plane3.rotation.y = Math.PI / 2
plane4.rotation.y = Math.PI / 2
plane1.position.set( 0, 2.5, 0 );
plane2.position.set( 0, -2.5, 0 );
plane3.position.set( 2.5, 0, 0 );
plane4.position.set( -2.5, 0, 0 );
 
var plane5 = new THREE.Mesh( geometry1, material1 );
var plane6 = new THREE.Mesh( geometry1, material1 )
var plane7 = new THREE.Mesh( geometry1, material1 );
var plane8 = new THREE.Mesh( geometry1, material1 )
scene.add( plane5 );
scene.add( plane6 );
scene.add( plane7 );
scene.add( plane8 );
plane5.rotation.x = Math.PI / 2
plane6.rotation.x = Math.PI / 2
plane7.rotation.y = Math.PI / 2
plane8.rotation.y = Math.PI / 2
plane5.position.set( 0, 2.5, 5 );
plane6.position.set( 0, -2.5, 5 );
plane7.position.set( 2.5, 0, 5 );
plane8.position.set( -2.5, 0, 5 );
 
var plane9 = new THREE.Mesh( geometry1, material1 );
var plane10 = new THREE.Mesh( geometry1, material1 )
var plane11 = new THREE.Mesh( geometry1, material1 );
var plane12 = new THREE.Mesh( geometry1, material1 )
scene.add( plane9 );
scene.add( plane10 );
scene.add( plane11 );
scene.add( plane12 );
plane9.rotation.x = Math.PI / 2
plane10.rotation.x = Math.PI / 2
plane11.rotation.y = Math.PI / 2
plane12.rotation.y = Math.PI / 2
plane9.position.set( 0, 2.5, 10 );
plane10.position.set( 0, -2.5, 10 );
plane11.position.set( 2.5, 0, 10 );
plane12.position.set( -2.5, 0, 10 );
 
var light = new THREE.PointLight('#ffffff')
light.dispose = 0
//light.castShadow = True
light.decay = 2
light.position.set(0, 0, 0)
scene.add(light)
 
camera.position.z = 10;
cube.position.set( 0, 1, 0 );
 
function render() {
    requestAnimationFrame( render );
    //cube.rotation.x += 0.1;
    //cube.rotation.y += 0.1;
    camera.rotation.z += 0.01
    renderer.render( scene, camera );
}
render();
 
function ava() {
    if (camera.position.z >= -2) {
        requestAnimationFrame( ava );
        camera.position.z -= 0.01;
    }
    if (camera.position.z <= -2) {
        var obj1 = document.getElementById("mainCanvas");
        obj1.className = "disappear";
    }
    document.getElementById("button").innerHTML = "我点击了！";
}
 
function nextPage(selfP, nextP) {
    document.getElementById(selfP).className = "showed";
    document.getElementById(nextP).className = "showing";
}
</script>
<div id="floatContainer">
  <div id="p0" class="showing">
    <div class="content thefirst">
      <b>[来自SCiPNet管理系统的信息]</b>
      <p>当前无法定位到访问来源。请确认您的时空坐标处于基准现实中。（参考坐标：<tt>[0φ:0d:246.2801:0]</tt>）</p>
      <p>若您确定继续，将为您加载请求的文档“SCP-CN-2XXX”。</p>
    </div>
    <center><a href="javascript:;" class="btnChange" onclick="nextPage('p0', 'p1')">确定</a></center>
  </div>
  <div id="p1" class="">
    <div class="content">
    </div>
    <center><a href="javascript:;" class="btnChange" onclick="nextPage('p1', 'p2')">确定</a></center>
  </div>
<div id="button" onclick="ava()">
text
</div>
</body>
HSB Foundation

Hormress's Sandbox
