代码要短，效果要骚，但别让老板看到

代码要短，效果要骚，但别让老板看到

前端开发总有些小技巧，代码量少但效果惊艳，关键是这些花活最好别让老板发现。毕竟在老板眼里，代码越复杂越显得工作量饱满。下面这些骚操作，能让你在同事面前秀一波，又不会让老板觉得你在偷懒。

一行代码实现暗黑模式

谁说切换主题非得写一堆CSS变量？用filter属性直接反转颜色，瞬间搞定暗黑模式：

document.body.style.filter = 'invert(1) hue-rotate(180deg)';

这行代码会把整个页面颜色反转，再调整色相，白变黑、黑变白。虽然图片也会被反转，但加上这个修正：

img {
  filter: invert(1) hue-rotate(180deg);
}

控制台艺术

调试信息也能玩出花样，在控制台输出ASCII艺术字：

console.log('%c  (\\_/)  \n ( •ᴗ• ) \n / >❤️ 前端骚操作', 
  'font-size: 20px; color: #ff69b4');

用CSS样式修饰控制台输出，甚至能画彩虹文字：

console.log('%cR%cA%cI%cN%cB%cO%cW', 
  'color:red', 'color:orange', 'color:yellow', 
  'color:green', 'color:blue', 'color:indigo', 'color:violet');

鼠标轨迹烟花

给页面添加鼠标跟随效果，十行代码搞定视觉盛宴：

document.addEventListener('mousemove', (e) => {
  const dot = document.createElement('div');
  dot.className = 'trail';
  dot.style.left = `${e.pageX}px`;
  dot.style.top = `${e.pageY}px`;
  document.body.appendChild(dot);
  setTimeout(() => dot.remove(), 1000);
});

加上CSS让效果更炫：

.trail {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #ff8a00, #da1b60);
  pointer-events: none;
  transform: scale(0);
  animation: trail 1s ease-out;
}
@keyframes trail {
  to { transform: scale(2); opacity: 0; }
}

页面抖动特效

用户点击按钮时让整个页面"震怒"，这种效果用来提示错误操作再合适不过：

function shakePage() {
  document.body.style.transform = 'translateX(10px)';
  setTimeout(() => document.body.style.transform = 'translateX(-10px)', 50);
  setTimeout(() => document.body.style.transform = 'translateX(5px)', 100);
  setTimeout(() => document.body.style.transform = 'translateX(-5px)', 150);
  setTimeout(() => document.body.style.transform = '', 200);
}

文字渐变动画

不用JS，纯CSS实现文字颜色渐变循环：

h1 {
  background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 5s ease infinite;
}
@keyframes rainbow {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

滚动视差魔术

创建视差滚动效果，背景和前景以不同速度移动：

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  document.querySelector('.bg').style.transform = `translateY(${scrollY * 0.5}px)`;
  document.querySelector('.fg').style.transform = `translateY(${scrollY * 0.2}px)`;
});

HTML结构只需：

<div class="bg"></div>
<div class="fg"></div>

输入框特效

让输入框获得焦点时像水波一样扩散：

input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,119,255,0.2);
  transition: box-shadow 0.3s ease;
  animation: ripple 0.6s linear;
}
@keyframes ripple {
  to { box-shadow: 0 0 0 8px rgba(0,119,255,0); }
}

3D按钮效果

用CSS transform创造真实的3D按压效果：

.button-3d {
  background: #4CAF50;
  border: none;
  padding: 12px 24px;
  color: white;
  transform-style: preserve-3d;
  transition: all 0.2s;
}
.button-3d:active {
  transform: translateY(4px) rotateX(20deg);
}

页面加载进度条

不用任何库，纯CSS+JS实现顶部加载条：

window.addEventListener('load', () => {
  const progress = document.createElement('div');
  progress.style.cssText = `
    position: fixed; top: 0; left: 0; 
    height: 3px; background: linear-gradient(to right, #ff4d4d, #f9cb28);
    transition: width 0.4s; z-index: 9999; width: 0%;
  `;
  document.body.prepend(progress);
  
  const interval = setInterval(() => {
    const scrollable = document.documentElement.scrollHeight - window.innerHeight;
    const scrolled = window.scrollY;
    progress.style.width = `${(scrolled / scrollable) * 100}%`;
  }, 100);
  
  window.addEventListener('scrollend', () => clearInterval(interval));
});

控制台隐藏彩蛋

在网站里埋个彩蛋，当用户在控制台输入特定命令时触发：

if (window.console) {
  const console = window.console;
  if (console.log) {
    console.log("%c想找彩蛋？试试输入: `openSesame()`", "color: #f0f");
  }
}

function openSesame() {
  document.body.style.background = '#000';
  const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
  setInterval(() => {
    document.body.style.color = colors[Math.floor(Math.random() * colors.length)];
  }, 200);
  console.log('%c恭喜发现彩蛋！', 'font-size: 50px; color: #f0f');
}

文字打字机效果

模拟老式打字机逐个打印文字的效果：

function typeWriter(element, text, speed = 100) {
  let i = 0;
  function typing() {
    if (i < text.length) {
      element.innerHTML += text.charAt(i);
      i++;
      setTimeout(typing, speed);
    }
  }
  element.innerHTML = '';
  typing();
}

悬浮放大镜

为图片添加鼠标悬浮放大效果：

.img-zoom {
  transition: transform 0.3s;
}
.img-zoom:hover {
  transform: scale(1.5);
  z-index: 10;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

随机颜色生成器

需要快速获取随机颜色时，不用去调色板：

const randomColor = `#${Math.floor(Math.random()*16777215).toString(16)}`;

更高级的HSL颜色空间版本：

function getRandomHSL() {
  return `hsl(${Math.random() * 360}, ${70 + Math.random() * 30}%, ${50 + Math.random() * 20}%)`;
}

页面元素拖拽

让任何元素可拖拽，只需几行代码：

function makeDraggable(element) {
  let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  element.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    element.style.top = (element.offsetTop - pos2) + "px";
    element.style.left = (element.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

滚动到顶部按钮

右下角的"回到顶部"按钮，平滑滚动：

const topButton = document.createElement('button');
topButton.innerHTML = '↑';
topButton.style.cssText = `
  position: fixed; bottom: 20px; right: 20px;
  width: 50px; height: 50px; border-radius: 50%;
  background: #333; color: white; border: none;
  cursor: pointer; opacity: 0; transition: opacity 0.3s;
`;
document.body.appendChild(topButton);

window.addEventListener('scroll', () => {
  topButton.style.opacity = window.scrollY > 300 ? '1' : '0';
});

topButton.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

元素呼吸灯效果

让元素像呼吸灯一样忽明忽暗：

@keyframes breathe {
  0%, 100% { opacity: 0.6; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}
.breathing {
  animation: breathe 3s ease-in-out infinite;
}

简易画板

用Canvas快速实现画板功能：

<canvas id="draw" width="800" height="600"></canvas>
<script>
  const canvas = document.getElementById('draw');
  const ctx = canvas.getContext('2d');
  let isDrawing = false;
  
  canvas.addEventListener('mousedown', () => isDrawing = true);
  canvas.addEventListener('mouseup', () => isDrawing = false);
  canvas.addEventListener('mousemove', draw);
  
  function draw(e) {
    if (!isDrawing) return;
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = `hsl(${Math.random() * 360}, 100%, 50%)`;
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
  }
</script>

文字波浪动画

让文字像波浪一样起伏：

.wave-text {
  display: inline-block;
}
.wave-text span {
  display: inline-block;
  animation: wave 2s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

配合JS为每个字母添加延迟：

function waveText(element) {
  const text = element.textContent;
  element.innerHTML = text.split('').map((char, i) => 
    `<span style="animation-delay: ${i * 0.1}s">${char}</span>`
  ).join('');
}

悬浮高亮表格行

让表格行在鼠标悬浮时高亮：

tr:hover {
  background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(200,230,255,0.9));
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transform: scale(1.01);
  transition: all 0.2s ease;
}

简易模态框

不用任何库实现模态框：

function showModal(content) {
  const modal = document.createElement('div');
  modal.style.cssText = `
    position: fixed; top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.7); 
    display: flex; justify-content: center; 
    align-items: center; z-index: 1000;
  `;
  
  const modalContent = document.createElement('div');
  modalContent.style.cssText = `
    background: white; padding: 20px; 
    border-radius: 5px; max-width: 80%;
  `;
  modalContent.innerHTML = content;
  
  modal.appendChild(modalContent);
  document.body.appendChild(modal);
  
  modal.addEventListener('click', (e) => {
    if (e.target === modal) {
      document.body.removeChild(modal);
    }
  });
}

元素随机散布

让一组元素随机散布在容器中：

function scatterElements(containerSelector) {
  const container = document.querySelector(containerSelector);
  const elements = container.children;
  const containerRect = container.getBoundingClientRect();
  
  Array.from(elements).forEach(el => {
    const x = Math.random() * (containerRect.width - el.offsetWidth);
    const y = Math.random() * (containerRect.height - el.offsetHeight);
    el.style.position = 'absolute';
    el.style.left = `${x}px`;
    el.style.top = `${y}px`;
    el.style.transition = 'all 0.5s ease';
  });
}

页面元素摇摆

让元素像钟摆一样摇摆：

@keyframes swing {
  0% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  100% { transform: rotate(-5deg); }
}
.swing {
  transform-origin: top center;
  animation: swing 2s ease-in-out infinite;
}

简易图片懒加载

原生实现图片懒加载：

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach(img => observer.observe(img));
}

文字描边效果

不用PS给文字添加描边：

.stroke-text {
  color: white;
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

悬浮卡片翻转

卡片悬浮时3D翻转效果：

.flip-card {
  perspective: 1000px;
}
.flip-card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  backface-visibility: hidden;
}
.flip-card-back {
  transform: rotateY(180deg);
}

简易颜色选择器

用input元素快速创建颜色选择器：

<input type="color" id="colorPicker" value="#ff0000">
<script>
  document.getElementById('colorPicker').addEventListener('input', (e) => {
    document.body.style.backgroundColor = e.target.value;
  });
</script>

元素闪烁警报

重要信息需要引起注意时的闪烁效果：

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.blink {
  animation: blink 1s step-end infinite;
}

简易手风琴菜单

纯CSS实现手风琴效果：

.accordion input[type="checkbox"] {
  display: none;
}
.accordion label {
  display: block;
  padding: 10px;
  background: #eee;
  cursor: pointer;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion input:checked ~ .accordion-content {
  max-height: 1000px;
}

悬浮放大阴影

元素悬浮时产生放大的阴影效果：

.card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

文字背景动画

文字背景有流动的渐变动画：

.animated-text {
  background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient 8s ease infinite;
}
@keyframes gradient {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

简易图片滤镜

用CSS filter属性实现各种图片滤镜效果：

/* 复古滤镜 */
.vintage {
  filter: sepia(70%) brightness(80%) contrast(120%) saturate(80%);
}
/* 冷色调