Matrex

790 Metehan

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

19 June 2025

Codificare la realtà

8 September 2024

7 November 2024

Effetto animazione passaggio del mouse sul testo

HTML

CSS

body, html {

height: 100%;

margin: 0;

padding: 0;

overflow: hidden;

font-family: 'Courier New', monospace;

}

#matrix-canvas {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

}

.login-container {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

z-index: 1;

}

h1 {

color: #00FF00;

text-shadow: 0 0 10px #00FF00;

margin-bottom: 20px;

}

.input-field {

margin: 20px 0;

}

input {

background: rgba(0, 0, 0, 0.5);

border: none;

border-bottom: 2px solid #00FF00;

color: #00FF00;

font-size: 16px;

padding: 10px;

width: 250px;

outline: none;

transition: border-color 0.3s;

}

input:focus {

border-color: #008000;

}

input::placeholder {

color: rgba(0, 255, 0, 0.5);

}

button {

background: none;

border: 2px solid #00FF00;

color: #00FF00;

padding: 10px 20px;

cursor: pointer;

font-size: 16px;

transition: all 0.3s ease;

}

button:hover {

background: #00FF00;

color: black;

}

JS

const canvas = document.getElementById('matrix-canvas');

const ctx = canvas.getContext('2d');

canvas.height = window.innerHeight;

canvas.width = window.innerWidth;

const matrixChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()_+-={}[]|\\:;"\'<>,.?/';

const fontSize = 16;

const columns = canvas.width / fontSize;

const drops = [];

for (let i = 0; i < columns; i++) {

drops[i] = 1;

}

function draw() {

ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#0F0';

ctx.font = fontSize + 'px monospace';

for (let i = 0; i < drops.length; i++) {

const text = matrixChars[Math.floor(Math.random() * matrixChars.length)];

ctx.fillText(text, i * fontSize, drops[i] * fontSize);

if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {

drops[i] = 0;

}

drops[i]++;

}

setInterval(draw, 33);

document.getElementById('loginForm').addEventListener('submit', function(event) {

event.preventDefault();

alert('Giriş yapıldı!');

});

Consigliato

Codificare la realtà

Effetto animazione passaggio del mouse sul testo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS