注册
web

前端の骚操作代码合集 | 让你的网页充满恶趣味

1️⃣ 永远点不到的幽灵按钮


效果描述:按钮会跟随鼠标指针,但始终保持微妙距离


<button id="ghostBtn" style="position:absolute">点我试试?</button>
<script>
const btn = document.getElementById('ghostBtn');
document.addEventListener('mousemove', (e) => {
btn.style.left = `${e.clientX + 15}px`;
btn.style.top = `${e.clientY + 15}px`;
});
</script>



Desktop2025.03.04-12.25.56.17-ezgif.com-video-to-gif-converter.gif


2️⃣ 极简黑客帝国数字雨


代码亮点:仅用 20 行代码实现经典效果


<canvas id="matrix"></canvas>
<script>
const canvas = document.getElementById('matrix');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const chars = '01';
const drops = Array(Math.floor(canvas.width/20)).fill(0);

function draw() {
ctx.fillStyle = 'rgba(0,0,0,0.05)';
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = '#0F0';
drops.forEach((drop, i) => {
ctx.fillText(chars[Math.random()>0.5?0:1], i*20, drop);
drops[i] = drop > canvas.height ? 0 : drop + 20;
});
}
setInterval(draw, 100);
</script>


运行建议:按下 F11 进入全屏模式效果更佳
Desktop2025.03.04-12.28.02.18-ezgif.com-video-to-gif-converter.gif




下面是优化版:


<script>
const canvas = document.getElementById('matrix');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const chars = '01'; // 显示的字符
const columns = Math.floor(canvas.width / 20); // 列数
const drops = Array(columns).fill(0); // 每列的起始位置
const speeds = Array(columns).fill(0).map(() => Math.random() * 10 + 5); // 每列的下落速度

function draw() {
// 设置背景颜色并覆盖整个画布,制造渐隐效果
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 设置字符颜色
ctx.fillStyle = '#0F0'; // 绿色
ctx.font = '20px monospace'; // 设置字体

// 遍历每一列
drops.forEach((drop, i) => {
// 随机选择一个字符
const char = chars[Math.random() > 0.5 ? 0 : 1];
// 绘制字符
ctx.fillText(char, i * 20, drop);
// 更新下落位置
drops[i] += speeds[i];
// 如果超出画布高度,重置位置
if (drops[i] > canvas.height) {
drops[i] = 0;
speeds[i] = Math.random() * 10 + 5; // 重置速度
}
});
}

// 每隔100毫秒调用一次draw函数
setInterval(draw, 100);
</script>

3️⃣ 元素融化动画


交互效果:点击元素后触发扭曲消失动画


<div onclick="melt(this)" 
style="cursor:pointer; padding:20px; background:#ff6666;">

点我融化!
</div>

<script>
function melt(element) {
let pos = 0;
const meltInterval = setInterval(() => {
element.style.borderRadius = `${pos}px`;
element.style.transform = `skew(${pos}deg) scale(${1 - pos/100})`;
element.style.opacity = 1 - pos/100;
pos += 2;
if(pos > 100) clearInterval(meltInterval);
}, 50);
}
</script>



Desktop 2025.03.04 - 12.28.43.19.gif


4️⃣ 控制台藏宝图


彩蛋效果:在开发者工具中埋入神秘信息


console.log('%c🔮 你发现了秘密通道!', 
'font-size:24px; color:#ff69b4; text-shadow: 2px 2px #000');
console.log('%c输入咒语 %c"芝麻开门()" %c获得力量',
'color:#666', 'color:#0f0; font-weight:bold', 'color:#666');
console.debug('%c⚡ 警告:前方高能反应!',
'background:#000; color:#ff0; padding:5px;');



5️⃣ 重力反转页面


魔性交互:让页面滚动方向完全颠倒


window.addEventListener('wheel', (e) => {
e.preventDefault();
window.scrollBy(-e.deltaX, -e.deltaY);
}, { passive: false });

慎用警告:此功能可能导致用户怀疑人生 ( ̄▽ ̄)"




6️⃣ 实时 ASCII 摄像头


技术亮点:将摄像头画面转为字符艺术


<pre id="asciiCam" style="font-size:8px; line-height:8px;"></pre>
<script>
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
const video = document.createElement('video');
video.srcObject = stream;
video.play();

const chars = '@%#*+=-:. ';
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

video.onplaying = () => {
canvas.width = 80;
canvas.height = 40;

setInterval(() => {
ctx.drawImage(video, 0, 0, 80, 40);
const imgData = ctx.getImageData(0,0,80,40).data;
let ascii = '';

for(let i=0; i<imgData.length; i+=4) {
const brightness = (imgData[i]+imgData[i+1]+imgData[i+2])/3;
ascii += chars[Math.floor(brightness/25.5)]
+ (i%(80*4) === (80*4-4) ? '\n' : '');
}

document.getElementById('asciiCam').textContent = ascii;
}, 100);
};
});
</script>



⚠️ 使用注意事项



  1. 摄像头功能需 HTTPS 环境或 localhost 才能正常工作
  2. 反向滚动代码可能影响用户体验,建议仅在整蛊场景使用
  3. 数字雨效果会持续消耗 GPU 资源
  4. 控制台彩蛋要确保不会暴露敏感信息



这些代码就像前端的"复活节彩蛋",适度使用能让网站充满趣味性,但千万别用在生产环境哦!(≧∇≦)ノ


https://codepen.io/  链接 CodePen)
希望这篇博客能成为程序员的快乐源泉!🎉

作者:一天睡25小时
来源:juejin.cn/post/7477573759254675507

0 个评论

要回复文章请先登录注册