让你的网页充满恶趣味

前端の骚操作代码合集 | 让你的网页充满恶趣味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>

---

⚠️ 使用注意事项

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

---

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

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