前端の骚操作代码合集 | 让你的网页充满"恶"趣味
稀
一天睡25小时约 3 分钟
一天睡25小时约 3 分钟点击关注公众号，“技术干货” 及时达！
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>
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 进入全屏模式效果更佳
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>
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>
⚠️ 使用注意事项
❝❞
摄像头功能需 HTTPS 环境或 localhost 才能正常工作 反向滚动代码可能影响用户体验，建议仅在整蛊场景使用 数字雨效果会持续消耗 GPU 资源 控制台彩蛋要确保不会暴露敏感信息
这些代码就像前端的"复活节彩蛋"，适度使用能让网站充满趣味性，但千万别用在生产环境哦！(≧∇≦)ﾉ
点击关注公众号，“技术干货” 及时达！