前端の骚操作代码合集 | 让你的网页充满"恶"趣味
<h2>1️⃣ 永远点不到的幽灵按钮</h2><p>「效果描述」：按钮会跟随鼠标指针，但始终保持微妙距离</p>
<pre><code><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>
</code></pre>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_gif/lCQLg02gtibuTYniaoicPU1iasxXeVTqASSoAuKuMrYSNgLL5amv0jNBHUWPIF3VSILAwguP0YuyxVNwHjAmDztIlw/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="图片" /></p>
<h2>2️⃣ 极简黑客帝国数字雨</h2>
<p>「代码亮点」：仅用 20 行代码实现经典效果</p>
<pre><code><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, i*20, drop);
drops = drop > canvas.height ? 0 : drop + 20;
});
}
setInterval(draw, 100);
</script>
</code></pre>
<p>「运行建议」：按下 F11 进入全屏模式效果更佳</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_gif/lCQLg02gtibuTYniaoicPU1iasxXeVTqASSo8wkK3ZlFKlbA3PC2hchEMVC55vynILE5icia4R8xL4kuNrGp4YviappFQ/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="图片" /></p>
<h2>3️⃣ 元素融化动画</h2>
<p>「交互效果」：点击元素后触发扭曲消失动画</p>
<pre><code><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>
</code></pre>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_gif/lCQLg02gtibuTYniaoicPU1iasxXeVTqASSoyRdSOiaUeMPcsNUInzcdqDkbbXXsn4eic51KvsVToHcMfqvVI4aicG5aQ/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="图片" /></p>
<h2>4️⃣ 控制台藏宝图</h2>
<p>「彩蛋效果」：在开发者工具中埋入神秘信息</p>
<pre><code>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;');
</code></pre>
<h2>5️⃣ 重力反转页面</h2>
<p>「魔性 交互」：让页面滚动方向完全颠倒</p>
<pre><code>window.addEventListener('wheel', (e) => {
e.preventDefault();
window.scrollBy(-e.deltaX, -e.deltaY);
}, { passive: false });
</code></pre>
<p>「慎用警告」：此功能可能导致用户怀疑人生 (￣▽￣)"</p>
<h2>6️⃣ 实时 ASCII 摄像头</h2>
<p>「技术亮点」：将摄像头画面转为字符艺术</p>
<pre><code><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+imgData+imgData)/3;
ascii += chars
+ (i%(80*4) === (80*4-4) ? '\n' : '');
}
document.getElementById('asciiCam').textContent = ascii;
}, 100);
};
});
</script>
</code></pre>
<h2>⚠️ 使用注意事项</h2>
<blockquote>
<ol>
<li>摄像头功能需 HTTPS 环境或 localhost 才能正常工作</li>
<li>反向滚动代码可能影响用户体验，建议仅在整蛊场景使用</li>
<li>数字雨效果会持续消耗 GPU 资源</li>
<li>控制台彩蛋要确保不会暴露敏感信息</li>
</ol>
</blockquote>
<p>这些代码就像前端的"复活节彩蛋"，适度使用能让网站充满趣味性，但千万别用在生产环境哦！(≧∇≦)ﾉ</p>
页:
[1]