https://www.showyourcode.app/zh/share/fd5oc6mteej28o
打开网址享用，第一个是deepseek优化后的，下面的代码是我自己手敲的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>guolin.me · 代码雨</title>
<style>
/* ----- 基础重置 & 全局样式 ----- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #0f172a;
text-align: center;
font-family: sans-serif;
overflow: hidden;
height: 100vh;
width: 100vw;
}
/* ----- Canvas 背景（代码雨） ----- */
#matrixCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
display: block;
background-color: #0a0e1a;
}
/* ----- 所有内容放在 canvas 上方 ----- */
.content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
text-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
pointer-events: none;
}
.content>* {
pointer-events: auto;
}
/* ----- 标题 ----- */
h1 {
color: #38bdf8;
text-shadow: 0 0 20px #38bdf8, 0 0 60px rgba(56, 189, 248, 0.3);
font-size: 3rem;
margin-bottom: 0.2rem;
letter-spacing: 4px;
}
h2 {
color: #ff007c;
text-shadow: 0 0 10px #ff007c, 0 0 40px rgba(255, 0, 124, 0.3);
font-size: 1.8rem;
margin-bottom: 0.5rem;
font-weight: 300;
}
/* ----- 打字特效容器 ----- */
.typewriter-wrapper {
min-height: 150px;
margin-bottom: 1.2rem;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 800px;
padding: 0 10px;
}
.typewriter-text {
font-family: 'Courier New', monospace;
font-size: 2rem;
/* 字号增大 */
color: #b0e0ff;
text-shadow: 0 0 20px rgba(56, 189, 248, 0.4), 0 0 60px rgba(56, 189, 248, 0.1);
letter-spacing: 2px;
line-height: 1.6;
min-height: 4rem;
border-right: 2px solid #38bdf8;
/* 光标变细 */
padding-right: 8px;
animation: blink-caret 0.75s step-end infinite;
text-align: center;
word-break: break-word;
font-weight: 500;
}
.typewriter-text.done {
border-right: none;
animation: none;
}
@keyframes blink-caret {
0%,
100% {
border-color: transparent;
}
50% {
border-color: #38bdf8;
}
}
/* 每段文字之间的分隔效果（已弃用，但保留样式） */
.typewriter-line {
display: block;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.typewriter-line.visible {
opacity: 1;
transform: translateY(0);
}
/* ----- 头像 ----- */
img {
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.9);
width: 180px;
height: 180px;
object-fit: cover;
box-shadow: 0 0 40px #38bdf8, 0 0 80px rgba(56, 189, 248, 0.2);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 1.2rem;
}
img:hover {
transform: scale(1.05);
box-shadow: 0 0 60px #38bdf8, 0 0 120px rgba(56, 189, 248, 0.3);
}
img:active {
transform: scale(0.95);
}
/* ----- 链接按钮（带左右移动动画） ----- */
a {
text-decoration: none;
display: inline-block;
}
a h1 {
animation: leftrightmove 1.5s ease-in-out infinite alternate;
color: #00ff88;
text-shadow: 0 0 10px #00ff88, 0 0 30px #00ff88, 0 0 60px rgba(0, 255, 136, 0.2);
font-size: 1.6rem;
padding: 0.4rem 1.8rem;
border: 2px solid rgba(0, 255, 136, 0.3);
border-radius: 60px;
background: rgba(0, 255, 136, 0.05);
backdrop-filter: blur(4px);
transition: all 0.3s ease;
letter-spacing: 2px;
}
a h1:hover {
background: rgba(0, 255, 136, 0.15);
border-color: #00ff88;
box-shadow: 0 0 40px rgba(0, 255, 136, 0.2);
}
@keyframes leftrightmove {
0% {
transform: translateX(16px);
}
100% {
transform: translateX(-16px);
}
}
/* ----- “系统错误”弹窗 ----- */
.fack-alert {
background-color: rgba(36, 32, 32, 0.92);
color: #ff3333;
position: fixed;
border: 2px solid #ff3333;
box-shadow: 0 0 30px rgba(255, 51, 51, 0.6), inset 0 0 20px rgba(255, 51, 51, 0.1);
padding: 12px 26px;
font-weight: bold;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 1.1rem;
letter-spacing: 2px;
transform: scale(0.1);
opacity: 0;
transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 999;
white-space: nowrap;
user-select: none;
pointer-events: none;
text-shadow: 0 0 15px #ff3333;
}
/* ----- 移动端适配 ----- */
@media (max-width: 600px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.2rem;
margin-bottom: 0.3rem;
}
.typewriter-wrapper {
min-height: 120px;
margin-bottom: 0.8rem;
}
.typewriter-text {
font-size: 1.4rem;
/* 移动端稍小但依然清晰 */
min-height: 3.2rem;
line-height: 1.5;
border-right-width: 1.5px;
padding-right: 6px;
}
img {
width: 130px;
height: 130px;
}
a h1 {
font-size: 1rem;
padding: 0.3rem 1.2rem;
}
.fack-alert {
font-size: 0.85rem;
padding: 8px 16px;
}
}
@media (max-width: 400px) {
h1 {
font-size: 1.5rem;
}
.typewriter-text {
font-size: 1.1rem;
min-height: 2.6rem;
}
img {
width: 100px;
height: 100px;
}
a h1 {
font-size: 0.85rem;
padding: 0.2rem 0.8rem;
}
}
</style>
</head>
<body>
<!-- ====== 代码雨 Canvas ====== -->
<canvas id="matrixCanvas"></canvas>
<!-- ====== 主内容 ====== -->
<div class="content">
<h1>guolin.me</h1>
<h2>被收录了! 😄</h2>
<!-- 打字特效区域 -->
<div class="typewriter-wrapper">
<div class="typewriter-text" id="typewriterText"></div>
</div>
<img src="https://guolin.me/content/uploadfile/202602/4b1c1772282384.jpg" onclick="hacketattack()" alt="avatar" />
<a href="http://guolin.me" target="_blank">
<h1>🔥 点击传送：进入郭的秀 🔥</h1>
</a>
</div>
<script>
// ================================================================
// 1. 黑客帝国 · 代码雨（流畅优化版）
// ================================================================
(function initMatrix() {
const canvas = document.getElementById('matrixCanvas');
const ctx = canvas.getContext('2d');
const chars =
'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
const FONT_SIZE = 18;
const COLUMN_WIDTH = 22;
const SPEED_MIN = 3.8;
const SPEED_MAX = 6.8;
const DENSITY = 1.5;
const TAIL_MIN = 10;
const TAIL_MAX = 22;
const FADE_ALPHA = 0.12;
let columns = [];
let colsCount = 0;
let w, h;
function resizeCanvas() {
w = window.innerWidth;
h = window.innerHeight;
canvas.width = w;
canvas.height = h;
const rawCols = Math.floor(w / COLUMN_WIDTH);
colsCount = Math.min(120, Math.max(20, Math.floor(rawCols * DENSITY)));
columns = [];
for (let i = 0; i < colsCount; i++) {
const x = i * (w / colsCount) + (Math.random() * 6 - 3);
const y = Math.random() * h;
const speed = SPEED_MIN + Math.random() * (SPEED_MAX - SPEED_MIN);
const length = TAIL_MIN + Math.floor(Math.random() * (TAIL_MAX - TAIL_MIN + 1));
columns.push({
x: x,
y: y,
speed: speed,
length: length,
chars: [],
});
for (let j = 0; j < length + 12; j++) {
columns[i].chars.push(chars[Math.floor(Math.random() * chars.length)]);
}
}
}
function draw() {
ctx.fillStyle = `rgba(10, 14, 26, ${FADE_ALPHA})`;
ctx.fillRect(0, 0, w, h);
ctx.font = FONT_SIZE + 'px "Courier New", monospace';
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
for (let i = 0; i < columns.length; i++) {
const col = columns[i];
col.y += col.speed * 0.9;
if (col.y > h + 40) {
col.y = -40 - Math.random() * 80;
col.speed = SPEED_MIN + Math.random() * (SPEED_MAX - SPEED_MIN);
col.length = TAIL_MIN + Math.floor(Math.random() * (TAIL_MAX - TAIL_MIN + 1));
for (let j = 0; j < col.length + 12; j++) {
col.chars[j] = chars[Math.floor(Math.random() * chars.length)];
}
}
const endY = col.y;
for (let j = 0; j < col.length; j++) {
const yPos = endY - j * FONT_SIZE * 0.8;
if (yPos < -20 || yPos > h + 20) continue;
const brightness = 1 - (j / col.length);
const alpha = 0.15 + brightness * 0.85;
const green = 180 + Math.floor(75 * brightness);
const red = 20 + Math.floor(30 * brightness);
const blue = 20 + Math.floor(30 * brightness);
ctx.fillStyle = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
const charIndex = (j + Math.floor(col.y / 10)) % col.chars.length;
const char = col.chars[charIndex] || '0';
ctx.fillText(char, col.x, yPos);
}
const headY = endY;
if (headY > -10 && headY < h + 10) {
ctx.shadowColor = '#00ff88';
ctx.shadowBlur = 20;
ctx.fillStyle = '#ccffcc';
const headChar = col.chars[Math.floor(col.y / 6) % col.chars.length] || '0';
ctx.fillText(headChar, col.x, headY);
ctx.shadowBlur = 0;
}
}
if (Math.random() < 0.02) {
const fx = Math.random() * w;
const fy = Math.random() * h;
ctx.globalAlpha = 0.08;
ctx.fillStyle = '#00ff88';
ctx.font = (12 + Math.random() * 16) + 'px "Courier New", monospace';
ctx.fillText(chars[Math.floor(Math.random() * chars.length)], fx, fy);
ctx.globalAlpha = 1;
}
requestAnimationFrame(draw);
}
window.addEventListener('resize', () => {
resizeCanvas();
});
resizeCanvas();
draw();
window._matrixResize = resizeCanvas;
})();
// ================================================================
// 2. 打字机特效（三段文字 · 循环播放）
// ================================================================
(function typewriter() {
const el = document.getElementById('typewriterText');
const lines = [
'大家好，我是郭麟',
'欢迎来到我的博客郭的秀',
'点击下面的按钮，进入博客之旅吧！'
];
let lineIndex = 0;
let charIndex = 0;
let isDeleting = false;
let timer = null;
// 重置所有状态
function resetAll() {
lineIndex = 0;
charIndex = 0;
isDeleting = false;
el.textContent = '';
el.classList.remove('done');
// 清除任何待执行的定时器
if (timer) {
clearTimeout(timer);
timer = null;
}
// 开始打字
type();
}
function type() {
// 如果所有行已经显示完毕（最后一行打完并停留），则重置循环
if (lineIndex >= lines.length) {
// 全部完成，等待2秒后重置
timer = setTimeout(() => {
resetAll();
}, 2000);
return;
}
const currentLine = lines[lineIndex];
const fullText = currentLine;
if (!isDeleting) {
// 打字
if (charIndex <= fullText.length) {
el.textContent = fullText.substring(0, charIndex);
charIndex++;
timer = setTimeout(type, 50 + Math.random() * 40);
} else {
// 打完当前行，暂停，然后决定是删除还是进入下一行
const delay = (lineIndex === lines.length - 1) ? 1500 : 1000;
timer = setTimeout(() => {
// 如果是最后一行，直接标记完成（但还要循环，所以不真正结束，而是设置lineIndex++触发重置）
if (lineIndex === lines.length - 1) {
// 最后一行打完，标记完成，但实际触发重置在下一轮检测 lineIndex >= lines.length
lineIndex++; // 使 lineIndex 越界
// 但我们需要保留显示，所以不删除内容，等待重置
// 这里我们直接调用type，会进入 lineIndex >= lines.length 分支进行重置
type();
} else {
// 不是最后一行，开始删除
isDeleting = true;
timer = setTimeout(type, 200);
}
}, delay);
}
} else {
// 删除（退格）
if (charIndex > 0) {
el.textContent = fullText.substring(0, charIndex - 1);
charIndex--;
timer = setTimeout(type, 25 + Math.random() * 15);
} else {
// 删除完毕，进入下一行
isDeleting = false;
lineIndex++;
charIndex = 0;
el.textContent = '';
timer = setTimeout(type, 150);
}
}
}
// 启动打字，延迟一点开始
setTimeout(type, 400);
})();
// ================================================================
// 3. 原有功能：hacketattack（系统错误彩蛋）
// ================================================================
function hacketattack() {
const n = 80;
for (let i = 1; i <= n; i++) {
setTimeout(() => {
let box = document.createElement('div');
box.innerText = '⚠️ 系统错误 ⚠️';
document.body.appendChild(box);
box.className = 'fack-alert';
box.offsetHeight;
const margin = 60;
const left = margin + Math.random() * (window.innerWidth - margin * 2);
const top = margin + Math.random() * (window.innerHeight - margin * 2);
box.style.left = left + 'px';
box.style.top = top + 'px';
const scale = 0.6 + Math.random() * 0.8;
const rotate = (Math.random() - 0.5) * 50;
box.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
box.style.opacity = '1';
const duration = 4000 + Math.random() * 5000;
setTimeout(() => {
box.style.opacity = '0';
box.style.transform = `scale(0.2) rotate(${rotate + 20}deg)`;
setTimeout(() => {
if (box.parentNode) box.remove();
}, 500);
}, duration);
}, i * 22);
}
console.log('%c⚠️ 系统入侵检测 ⚠️', 'color: #ff3333; font-size: 20px; font-weight: bold;');
console.log('%c你触发了隐藏彩蛋！ 🔥', 'color: #00ff88; font-size: 14px;');
}
console.log('%c✦ guolin.me · 流畅代码雨 + 循环打字 ✦', 'color: #00ff88; font-size: 16px;');
console.log('%c点击头像触发「系统错误」彩蛋 🥚', 'color: #38bdf8; font-size: 13px;');
</script>
</body>
</html><style>
body{
background-color: #0f172a;
text-align: center;
font-family: sans-serif;
}
h1{
color: #38bdf8;
text-shadow: 0 0 20px #38bdf8;
}
h2{
color: #ff007c;
text-shadow: 0 0 10px #ff007c;
}
img{
border-radius: 50%;
border: 4px solid white;
width: 300px;
height: 300px;
object-fit: cover;
box-shadow: 0 0 30px #38bdf8;
}
a{
text-decoration: none;
}
@keyframes leftrightmove{
0% {transform: translateX(20px);}
100% {transform: translateX(-20px);}
}
a h1{
animation: leftrightmove 1.5s ease-in-out infinite alternate;
color: #00ff00;
text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
}
.fack-alert{
background-color: rgb(36, 32, 32);
color: red;
position: fixed;
left: 50%;
top: 50%;
border: 2px solid red;
box-shadow: 0 0 25px #ff3333;
padding: 10px 20px;
font-weight: bold;
border-radius: 5px;
transform: scale(0.1);
opacity: 0;
transition: all 0.5s;
}
</style>
<body>
<h1>guolin.me</h1>
<h2>被收录了!😄</h2>
<img src="https://guolin.me/content/uploadfile/202602/4b1c1772282384.jpg" onclick="hacketattack()">
<a href="http://guolin.me">
<h1>🔥点击传送：进入郭的秀🔥</h1>
</a>
</body>
<script>
function hacketattack(){
var n=100;
for(var i=1;i<=n;i++){
setTimeout(() => {
let box = document.createElement("div");
box.innerText = "⚠️系统错误⚠️";
document.body.appendChild(box);
box.className="fack-alert";
box.offsetHeight
box.style.left = (Math.random() * 100) +"%";
box.style.top = (Math.random() * 100) +"%";
box.style.opacity = "1";
box.style.transform = `scale(${Math.random()+0.5}) rotate(${Math.random()*60-30}deg)`;
},i*20);
}
}
</script>
评论一下？