如何实现wesbos.com首行文字切换及悬停展开的CSS动画效果

Hey there! I've broken this down into two easy-to-follow core parts—continuous text switching and hover expand animation—perfect for someone with basic CSS skills. Let's jump in:

1. Core Implementation Ideas #

Continuous Text Switching #

• Stack multiple text elements in the same space using position: absolute so they overlap
• Use CSS @keyframes to cycle their opacity and transform (like a fade + slide) to make them appear one after another
• Tweak animation durations and delays to control how fast the text rotates

Hover Expand Animation #

• Use CSS transition to make the hover effect smooth instead of abrupt
• For a "cool expand" look, start with transform: scale() (simplest for beginners) or experiment with width changes
• Add small touches like color shifts or subtle shadows to make the effect pop

2. Working Code Example #

Here's a self-contained snippet you can copy into an HTML file and test right away:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Main container for rotating text */
    .rotate-text-wrapper {
      position: relative;
      display: inline-block;
      font-size: 2.2rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    /* Individual rotating text items */
    .rotate-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transform: translateY(15px);
      animation: rotateCycle 8s infinite;
    }

    /* Delay each item so they rotate in sequence */
    .rotate-item:nth-child(2) { animation-delay: 2s; }
    .rotate-item:nth-child(3) { animation-delay: 4s; }
    .rotate-item:nth-child(4) { animation-delay: 6s; }

    /* Hover expand effect */
    .rotate-text-wrapper:hover {
      transform: scale(1.1);
      color: #165DFF;
      text-shadow: 0 2px 10px rgba(22, 93, 255, 0.25);
    }

    /* Keyframes for text rotation animation */
    @keyframes rotateCycle {
      0%, 10% { opacity: 0; transform: translateY(15px); }
      15%, 30% { opacity: 1; transform: translateY(0); }
      35%, 100% { opacity: 0; transform: translateY(-15px); }
    }
  </style>
</head>
<body>
  <h1>
    I create 
    <span class="rotate-text-wrapper">
      <span class="rotate-item">websites</span>
      <span class="rotate-item">apps</span>
      <span class="rotate-item">products</span>
      <span class="rotate-item">experiences</span>
    </span>
  </h1>
</body>
</html>

3. Quick Customization Tips #

• Adjust animation-duration and animation-delay to make text switch faster or slower
• Change the transform values in @keyframes to try different transition styles (e.g., slide left instead of up)
• Swap transform: scale() in the hover state with width: auto if you want a horizontal expand effect
• Update the color values (#165DFF) to match your site's brand palette

内容的提问来源于stack exchange，提问作者Shahul Basha