Konsola w przeglądarce

Konsola napisana w CSS i JS



html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="console">
    <pre class="typing">$ </pre>
  </div>
</body>
</html>

css
.typing::after {
  content: '_';
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;  
}

.typing::before {
  content: 'SYSTEM KODUJE';
  display: block;
}

@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.typing {
  color: #34d834;
}
.console {
  background: black;
  height: 200px;
  border: 3px solid silver;
  border-top-width: 20px;
  position: relative;
  padding: 10px;
  border-radius: 3px;
}

.console::after {
  content: '';
  width: 10px;
  height: 10px;
  font-size: 10px;
  position: absolute;
  top: -15px;
  left: 1px;
  border-radius: 50%;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.console::before {
  content: '';
  width: 10px;
  height: 10px;
  font-size: 10px;
  position: absolute;
  top: -15px;
  left: 15px;
  border-radius: 50%;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
}

js
var typing = document.querySelector('.typing'),
    currentIndex = 0;

var startTyping = function (text) {
  
  interval = setInterval(function(){
      if (text.length > currentIndex) {
        typing.textContent += text[currentIndex];
        currentIndex++;
      } else {
        clearInterval(interval);
      } 
  },100);
}

startTyping("tekst do wyświetlenia");



konsola js php




Napisz komentarz


Wprowadź kod obrazka
Capcha