創(chuàng)建CSS-only動(dòng)畫時(shí)間線需先構(gòu)建語義化HTML結(jié)構(gòu)，每個(gè)事件用包含圓點(diǎn)和內(nèi)容的div表示；2. 使用Flexbox佈局和偽元素創(chuàng)建居中垂直線，通過@keyframes定義fadeInUp動(dòng)畫實(shí)現(xiàn)內(nèi)容由下至上漸顯；3. 通過animation-delay逐項(xiàng)延遲動(dòng)畫實(shí)現(xiàn)級(jí)聯(lián)入場(chǎng)效果，並可選添加左右交替內(nèi)容對(duì)齊；4. 可選增強(qiáng)包括用drawLine動(dòng)畫模擬線條繪製過程、懸停效果及響應(yīng)式適配；5. 關(guān)鍵要點(diǎn)包括使用opacity和transform確保動(dòng)畫性能、採用語義化標(biāo)籤並測(cè)試移動(dòng)端佈局。最終實(shí)現(xiàn)無需JavaScript的流暢、可訪問且易定制的時(shí)間線。

Creating a CSS-only animated timeline is a great way to showcase events, milestones, or steps in a visually engaging way—without needing JavaScript. Here's how you can build one using just HTML and CSS, with smooth animations and a clean layout.

1. Structure the HTML Markup

Start with a semantic and simple HTML structure. Each timeline event goes into a list item, making it easy to style and animate.

 <div class="timeline">
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>Event One</h3>
      <p>January 2023</p>
      <p>This is the first milestone in the timeline.</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>Event Two</h3>
      <p>March 2023</p>
      <p>Second key event with more details.</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>Event Three</h3>
      <p>June 2023</p>
      <p>Final milestone in this example timeline.</p>
    </div>
  </div>
</div>

2. Style the Timeline with CSS

Now apply styles to create the vertical line, position the dots, and align the content. We'll use Flexbox for layout and @keyframes for animation.

 .timeline {
  position: relative;
  max-width: 800px;
  margin: 40px auto;
  padding: 20px 0;
}

/* Vertical line down the center */
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #007bff;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s forwards;
}

/* Offset animation delay for each item */
.timeline-item:nth-child(1) { animation-delay: 0.3s; }
.timeline-item:nth-child(2) { animation-delay: 0.6s; }
.timeline-item:nth-child(3) { animation-delay: 0.9s; }

/* Timeline dot */
.timeline-dot {
  width: 20px;
  height: 20px;
  background: #007bff;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #007bff40;
  margin: 0 20px;
  align-self: center;
}

/* Content box */
.timeline-content {
  flex: 1;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  max-width: 350px;
}

.timeline-content h3 {
  margin: 0 0 10px;
  color: #333;
}

.timeline-content p {
  margin: 5px 0;
  color: #666;
  font-size: 0.9em;
}

/* For alternating side (optional) */
.timeline-item:nth-child(odd) .timeline-content {
  align-self: flex-end;
}

.timeline-item:nth-child(even) .timeline-content {
  align-self: flex-start;
}

/* Animation keyframes */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

3. Optional Enhancements

You can make the timeline more dynamic with a few tweaks:

• Animate the line drawing : Use a pseudo-element with height animation.
• Add hover effects : Scale the dot or lift the card on hover.
• Responsive layout : On small screens, stack everything vertically.

Example: Animate the line being drawn from top to bottom:

 .timeline::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  background: #007bff;
  height: 0;
  animation: drawLine 1s ease-out forwards;
}

@keyframes drawLine {
  to {
    height: 100%;
  }
}

4. Key Points to Remember

• Use opacity and transform for smooth, performant animations.
• Stagger animation-delay to create a cascading effect.
• Keep the structure semantic— <ol></ol> or <ul></ul> can also be used instead of div s.
• Test on mobile: consider switching to a single-column layout using media queries.

Basically, a CSS-only animated timeline comes down to combining layout techniques (Flexbox, positioning), pseudo-elements for the line, and subtle animations to bring it to life. No JavaScript needed, and it's fast, accessible, and easy to customize.

以上是如何創(chuàng)建僅CSS的動(dòng)畫時(shí)間表？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！