css 一支笔由seth kontny。

Posted 2021-05-13

Terminal looking website
------------------------


A [Pen](http://codepen.io/sethkontny/pen/ytsnu) by [seth kontny](http://codepen.io/sethkontny) on [CodePen](http://codepen.io/).

[License](http://codepen.io/sethkontny/pen/ytsnu/license).

<section>
<div class="buzz_wrapper">
  <div class="text">
  <span><div id="msg"/></span>
  </div>
  <div class="scanline"></div>
  
</div>
<div class="buzz_wrapper1">
  <div class="text1">
  <span1><div id="msg1"/></span1>
  </div>
  <div class="scanline1"></div>
  
</div>
<br /><br /><br /><br />
<div ="second">  
<form method= "post" action='#' onsubmit="return checkforblank()">
  <textarea id="fname" rows="1"spellcheck="false" >LOADING TERMINAL</textarea> <br />
  <input type="submit" id="but" value="execute" />

</form>
<div class="buzz_wrapper2">
  <div class="text2">
  <span1><div id="msg2"/></span1>
  </div>
  <div class="scanline2"></div>
  </div>
 </section>
<section>
  
</section>

var showText = function (target, message, index, interval) {   
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
}
$(function () {

  showText("#msg", "Terminal", 0, 100);
  showText("#msg1", "My portfolio, type help", 0, 100);
});
 $(document).ready(function () {
            setTimeout("$('#fname').focus();", 500);
});
function checkforblank(){
  if (document.getElementById('fname').value == "help") {
    
    showText("#msg2", "commands:" , 0, 100);
    //document.getElementById("#ap").style.display = 'block';

    return false; 
  }
  else{
    alert('error: "help", dont have space at the end');
    return false;
  }

}

var textarea = document.querySelector('textarea');

textarea.addEventListener('keydown', autosize);
             
function autosize(){
  var el = this;
  setTimeout(function(){
    el.style.cssText = 'height:0; padding:0';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
  },0);
}
$(function() {
    $('textarea').on('keypress', function(e) {
        if (e.which == 32)
            return false;
    });
});
//setTimeout(function(){
  // $("textarea").show();
//},500); // 3 second delay

$("textarea").text("LOADING TERMINAL");
setTimeout(myFunction, 3000);
$("textarea").text("dwwwwwwwwwwww");

body{
  background:url("http://www.deleteagency.com/assets/img/pattern.png"); 
  background-color : black;
  
  cursor: url("http://i.imgur.com/zkZbB5k.png"), auto;

}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background-color: black; 
}
 ::-webkit-scrollbar-thumb {
    background-color: green;
}
::selection {color:black;background:green;}
::-moz-selection {color:black;background:green;}
.buzz_wrapper{
  position:relative;
  width:700px;
  margin:20px auto;
  overflow:hidden;
  padding:100px;
}
.scanline{
  width:100%;
  display:block;
  height:4px;
  position:relative;
  z-index:3;
  margin-bottom:5px;
  opacity:0.1;
}
.buzz_wrapper span{
  position:absolute;
  -webkit-filter: blur(1px);
  font-size:80px;
  font-family:'Courier new', fixed;
  font-weight:bold;
}
.buzz_wrapper span:nth-child(1){
  color:green;
  margin-left:-2px;
  -webkit-filter: blur(2px);
}
.buzz_wrapper span{
  -webkit-animation: blur 30ms infinite, jerk 50ms infinite;
}
.buzz_wrapper .text{
  -webkit-animation: jerkwhole 10s infinite;
  position:relative;
}
@-webkit-keyframes jerkwhole {
  30% {  }
  40% { opacity:1; top:0; left:0;  -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
  41% { opacity:0.8; top:0px; left:-100px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(50deg,0);}
  42% { opacity:0.8; top:0px; left:100px; -webkit-transform:scale(1,1.2);  -webkit-transform:skew(-80deg,0);}
  43% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1);  -webkit-transform:skew(0,0);}
  65% { }
}
/*---------------------------*/

.buzz_wrapper1{
  position:relative;
  width:700px;
  padding:100px;
}
.scanline1{
  width:100%;
  display:block;
  height:4px;
  position:relative;
  z-index:3;
  margin-bottom:5px;
  opacity:0.1;
}
.buzz_wrapper1 span1{
  position:absolute;
  -webkit-filter: blur(1px);
  font-size:40px;
  font-family:'Courier new', fixed;
  font-weight:bold;
}
.buzz_wrapper span1:nth-child(1){
  color:green;
  margin-left:-2px;
  -webkit-filter: blur(2px);
}
.buzz_wrapper1 span1{
  -webkit-animation: blur 30ms infinite, jerk 50ms infinite;
}
.buzz_wrapper1 .text1{
  -webkit-animation: jerkwhole 10s infinite;
  position:relative;
}
textarea{
  background-color: transparent;
  color: green;
  border: 0px solid green;
  font-size: 2.5em;
  margin-top: -15px;
  text-decoration: none;
-webkit-animation: blur 30ms infinite, jerk 50ms infinite;
  border-left:4px solid green;
  cursor: url("http://i.imgur.com/sjCxccZ.jpg"), auto;
  padding: 25px;
  overflow:hidden;
  /*display: none;*/
  
}
textarea:focus, input:focus{
    outline: 0;
}

/*----------------------*/

.buzz_wrapper2{
  position:relative;
  width:700px;
  margin-left: -100px;
  
  overflow:hidden;
  padding:100px;
}
.scanline2{
  width:100%;
  display:block;
  
  height:4px;
  position:relative;
  z-index:3;
  margin-bottom:5px;
  opacity:0.1;
}
.buzz_wrapper2 span2{
  position:absolute;
  -webkit-filter: blur(1px);
  font-size:40px;
  font-family:'Courier new', fixed;
  font-weight:bold;
}
.buzz_wrappe2 span2:nth-child(1){
  color:green;
  margin-left:-2px;
  -webkit-filter: blur(2px);
}

.buzz_wrapper2 span2{
  -webkit-animation: blur 30ms infinite, jerk 50ms infinite;
}

@-webkit-keyframes blur {
  0%   { -webkit-filter: 1blur(1px); opacity:0.8;}
  50% { -webkit-filter: blur(1px); opacity:1; }
  100%{ -webkit-filter: blur(1px); opacity:0.8; }
}
@-webkit-keyframes jerk {
  50% { left:1px; }
  51% { left:0; }
}
@-webkit-keyframes jerkup {
  50% { top:1px; }
  51% { top:0; }
}
.buzz_wrapper2 .text2{
  -webkit-animation: jerkwhole 5s infinite;
  position:relative;
}
#but{
  background-color: transparent;
  color: green;
  border: 0px solid green;
  text-decoration: none;
  -webkit-filter: blur(.9px);
  font-size: 2em;
  cursor: url("http://i.imgur.com/q21BHh4.png"), auto;
  -webkit-animation: blur 80ms infinite, jerk 250ms infinite;
   -webkit-animation: jerkwhole 10s infinite;
}

/*----------------------*/