CSS3动画：实现边框从中心向外扩展的问题求助

Hey Chris, I totally get what you're going for—those two gray borders spreading out from your central logo should feel like they're emanating from the core of your site, not just sliding in from the left. Let's fix that animation with a cleaner, more precise approach using Stylus! 🚀

First, let's break down why your original approach wasn't working: when you animate width from 0 to 100% on two separate divs, both start expanding from their own left edges. For the right border, that means it slides in from the left instead of pushing out from the logo's center. We need to anchor each border to the logo's edges and animate them outward.

Step 1: Clean HTML Structure #

We can skip extra divs and use pseudo-elements on the logo container to keep things semantic:

<div class="logo-container">
  <img src="your-logo.png" alt="Brand Logo" class="logo">
</div>

Step 2: Stylus Implementation #

This code uses variables for easy customization, anchors each border to the logo's sides, and animates them outward simultaneously:

// Customize these values to match your design
$logo-width = 80px       // Width of your logo
$border-color = #888     // Gray shade for borders
$border-thickness = 2px  // Thickness of the borders
$animation-speed = 1.2s  // Duration of the animation
$border-offset = 1.5rem  // Vertical space between logo and borders

.logo-container
  position: relative
  width: 100%
  text-align: center
  padding: 2rem 0

.logo
  display: inline-block
  width: $logo-width
  height: auto
  // Add any other logo styles here (margin, shadow, etc.)

// Left border: expands from logo's left edge to container's left edge
.logo-container::before
  content: ''
  position: absolute
  bottom: $border-offset
  // Anchor to the LEFT edge of the logo
  right: calc(50% + ($logo-width / 2))
  width: 0
  height: $border-thickness
  background: $border-color
  animation: expand-left $animation-speed ease-out forwards

// Right border: expands from logo's right edge to container's right edge
.logo-container::after
  content: ''
  position: absolute
  bottom: $border-offset
  // Anchor to the RIGHT edge of the logo
  left: calc(50% + ($logo-width / 2))
  width: 0
  height: $border-thickness
  background: $border-color
  animation: expand-right $animation-speed ease-out forwards

// Animation keyframes
@keyframes expand-left
  to
    // Expand to fill the left half of the container (minus logo width)
    width: calc(50% - ($logo-width / 2))

@keyframes expand-right
  to
    // Expand to fill the right half of the container (minus logo width)
    width: calc(50% - ($logo-width / 2))

How This Works #

• Anchoring: We use calc() to position each pseudo-element exactly at the logo's left/right edges by centering the container and offsetting by half the logo's width.
• Animation Direction: The left border animates its width from 0 to the left half of the container, while the right border animates to the right half—so both spread outward from the logo.
• Customization: All key values are stored in variables at the top, so you can tweak colors, sizes, and speed without digging through the code.

Bonus: Dynamic Logo Width (If Needed) #

If your logo has a dynamic width (e.g., responsive text logo), you can use a CSS variable instead of a fixed Stylus variable. Just add this to your global styles:

:root
  --logo-width: 80px // Update this with JavaScript if needed

// Then replace all instances of $logo-width with var(--logo-width) in the code above

That should give you the smooth, center-out border animation you're aiming for!

内容的提问来源于stack exchange，提问作者Chris Ko