CRT显示器设计

最新推荐文章于 2022-08-27 19:06:05 发布

Super_Calvin

最新推荐文章于 2022-08-27 19:06:05 发布

阅读量437

点赞数

分类专栏： # 几何图形文章标签： CRT显示器设计

本文链接：https://blog.csdn.net/weixin_45544796/article/details/109310637

版权

几何图形专栏收录该内容

89 篇文章 2 订阅

订阅专栏

CRT显示器设计

示例
HTML
CSS
JS

更多有趣示例尽在 知屋安砖社区

示例

在这里插入图片描述

HTML

<div id="monitor" class="crt">
  <img
   class="background" 
   src="https://dl.dropboxusercontent.com/u/5318200/IMG_REFRESH.gif"/>
  <pre class="content crt">
  <div id="canvas"></div><br>
    containment<br>
    ═══════[†]═══════<br><br><br>
    <span class="btn">start</span><br><br>
    <span class="btn">exit</span><br><br>
  <span class="message"></span>
<!--  <span class="layout">╔════════════════════╗</span>
  <span class="layout">║       BY ALEX      ║</span>
  <span class="layout">╚════════════════════╝</span>
  -->
  </pre>
  <div class="foreground"></div>
</div>

CSS

body {
  background-color: #222;
  text-align: center;
}
#canvas, canvas {
  width: 300px;
  height: 300px;
}

.crt {
 letter-spacing: 1px;
 font-family: 'VT323', monospace;
 color: #95e208;
 -webkit-filter: blur(.2px);
 text-transform: uppercase;
 text-shadow: 0 0 5px #22ff22, 0 0 5px #aaffaa;
 font-size: 22px;
}

#monitor {
 background-color: #222;
 background-color: #161913;
 
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 100vw;
 height: 100vh;
 text-transform: uppercase;
 padding: 15px;
}

.content {
  white-space: nowrap;
  text-align: center;
  display: inline-block;
}

.foreground, .background {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.foreground {
  background-image: url('https://dl.dropboxusercontent.com/u/5318200/IMG_Tile_Scalines.png');
}

.background {
  opacity: .01;
}

.btn {
  display: inline-block;
  line-height: 18px;
  cursor: pointer;
}

.btn:hover, .inv {
 display: inline-block;
 height: 16px;
 line-height: 12px;
 background-color: #95e208;
 box-shadow: 0 0 5px #22ff22, 0 0 5px #aaffaa;
 color: #1b3a22;
 text-shadow: none;
}

.btn:hover {
  background-color: rgb(141, 241, 102);
  box-shadow: 0 0 3px #22ff22, 0 0 100px rgba(40,140,40,1);
}

.layout {
  font-family: monospace;
  white-space: pre;
  display: block;
}

.message {
  position: absolute;
  left: 90px;
}

JS

document.getElementById("monitor").addEventListener('click', function(){
 document.getElementById("monitor").webkitRequestFullscreen();
});

$(function(){
        $(".message2").typed({
            strings: ["welcome to the deimos station maintance facility"],
            typeSpeed: 120
        });
    });

/* ThreeJS */

var container = $("#canvas");
var canvasWidth = container.width();
var canvasHeight = container.height();

console.log(canvasWidth);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, canvasWidth / canvasHeight, 0.1, 1000 );

// this creates a 3d rendering context and
// a canvas
var renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColor( 0x000000, 0 );

// the canvas is part of the renderer as a HTML DOM
// element and needs to be appended in the DOM
container.get(0).appendChild( renderer.domElement );

var geometry = new THREE.SphereGeometry( 2, 12, 12 );
var material = new THREE.MeshBasicMaterial({
      color : 0x92ff38,
      wireframe : true,
      wireframeLinewidth: 2
    });
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function render() {
	requestAnimationFrame( render );
  //cube.rotation.x += 0.02;
  cube.rotation.y += 0.008;
	renderer.render( scene, camera );
}
render();