Lê Phi Hoàng (THPTC Nguyễn Bỉnh Khiêm)
Giới thiệu
HTML
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Cyber Style</title>
<style>
body {
margin: 0;
height: 100vh;
background: black;
color: #0ff;
font-family: Consolas, monospace;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
h1 {
font-size: 60px;
text-transform: uppercase;
position: relative;
animation: glow 2s infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
}
to {
text-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
}
}
/* hiệu ứng glitch */
h1::before, h1::after {
content: "HACKED";
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
}
h1::before {
color: red;
animation: glitch1 1s infinite;
}
h1::after {
color: blue;
animation: glitch2 1s infinite;
}
@keyframes glitch1 {
0% { clip: rect(0, 9999px, 0, 0); }
50% { clip: rect(0, 9999px, 50px, 0); }
100% { clip: rect(0, 9999px, 0, 0); }
}
@keyframes glitch2 {
0% { clip: rect(50px, 9999px, 100px, 0); }
50% { clip: rect(10px, 9999px, 60px, 0); }
100% { clip: rect(50px, 9999px, 100px, 0); }
}
/* nền matrix */
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="matrix"></canvas>
<h1>HACKED</h1>
<script>
const canvas = document.getElementById("matrix");
const ctx = canvas.getContext("2d");
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
const chars = "01";
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 = chars[Math.floor(Math.random() * chars.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);
</script>
</body>
</html>