Keep the code short, the effects flashy, but don't let the boss see.

Author：Chuan Chen 阅读数：60858人阅读分类：前端综合

The code should be short, the effect should be flashy, but don't let the boss see it

Front-end development always has some little tricks—small in code but stunning in effect. The key is that these flashy moves are best kept hidden from the boss. After all, in the boss's eyes, the more complex the code, the more it seems like you're putting in the work. These slick tricks will let you show off in front of colleagues without making the boss think you're slacking.

One-line dark mode

Who says switching themes requires writing a bunch of CSS variables? Use the filter property to invert colors instantly, achieving dark mode in one line:

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

This line inverts the entire page's colors and adjusts the hue, turning white to black and black to white. Though images will also be inverted, you can fix that with this tweak:

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

Console art

Debugging info can also be fun—output ASCII art in the console:

console.log('%c  (\\_/)  \n ( •ᴗ• ) \n / >❤️ Front-end tricks', 
  'font-size: 20px; color: #ff69b4');

Use CSS to style console output, or even draw rainbow text:

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

Mouse trail fireworks

Add a mouse-following effect to the page with just ten lines of code for a visual feast:

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);
});

Add CSS to make it even flashier:

.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; }
}

Page shake effect

Make the entire page "shake with rage" when a user clicks a button—perfect for highlighting incorrect actions:

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);
}

Text gradient animation

Achieve a looping text color gradient with pure CSS, no JS:

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% }
}

Scroll parallax magic

Create a parallax scrolling effect where background and foreground move at different speeds:

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)`;
});

The HTML structure only needs:

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

Input box effects

Make input boxes ripple like water when focused:

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 button effect

Use CSS transform to create a realistic 3D press effect:

.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);
}

Page load progress bar

Implement a top loading bar with pure CSS + JS, no libraries:

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));
});

Console hidden Easter egg

Bury an Easter egg in your site that triggers when users enter a specific command in the console:

if (window.console) {
  const console = window.console;
  if (console.log) {
    console.log("%cLooking for an Easter egg? Try entering: `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('%cCongratulations! You found the Easter egg!', 'font-size: 50px; color: #f0f');
}

Typewriter text effect

Simulate an old-school typewriter printing text one character at a time:

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();
}

Hover magnifier

Add a hover zoom effect to images:

.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);
}

Random color generator

Need a random color fast? Skip the color picker:

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

A more advanced HSL color space version:

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

Draggable page elements

Make any element draggable with just a few lines of code:

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;
  }
}

Scroll-to-top button

A smooth-scrolling "back to top" button in the bottom-right corner:

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' });
});

Element breathing light effect

Make elements pulse like a breathing light:

@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;
}

Simple drawing board

Quickly implement a drawing board with 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>

Text wave animation

Make text undulate like waves:

.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); }
}

Add JS to apply delays to each letter:

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('');
}

Hover-highlight table rows

Highlight table rows on hover:

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;
}

Simple modal box

Implement a modal box without any libraries:

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);
    }
  });
}

Random element scattering

Randomly scatter a group of elements within a container:

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';
  });
}

Page element swing

Make elements swing like a pendulum:

@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;
}

Simple image lazy loading

Native implementation of image lazy loading:

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));
}

Text stroke effect

Add a stroke to text without Photoshop:

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

Hover card flip

3D flip effect on card hover:

.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);
}

Simple color picker

Quickly create a color picker with an input element:

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

Element blink alert

Blinking effect for important information that needs attention:

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

Simple accordion menu

Pure CSS accordion effect:

.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;
}

Hover zoom shadow

Element hover effect with enlarged shadow:

.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);
}

Text background animation

Flowing gradient animation for text backgrounds:

.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% }
}