如何使用CSS創建響應性的推薦滑塊

使用純CSS創建響應式自動輪播的推薦語滑塊是可行的，只需結合HTML結構、Flexbox佈局和CSS動畫。 2. 首先構建包含多個推薦語項的語義化HTML容器，每個.item包含引用內容和作者信息。 3. 通過設置父容器display: flex、width: 300%（三張幻燈片）並應用overflow: hidden實現橫向排列。 4. 利用@keyframes定義從0%到-100%的translateX變換，配合animation: scroll 15s linear infinite實現無縫自動滾動。 5. 添加媒體查詢在768px和480px以下時調整字體、間距及延長動畫週期至20秒以提升小屏體驗。 6. 可選地通過:hover狀態設置animation-play-state: paused實現懸停暫停。 7. 為提高性能可添加will-change: transform，同時建議增加ARIA標籤以增強可訪問性。最終得到一個輕量、流暢且跨設備兼容的純CSS推薦語輪播組件。

Creating a responsive testimonial slider with CSS doesn't require JavaScript if you keep it simple—using CSS animations, flexbox, and media queries. Here's how you can build one that works well across devices.

1. Structure the HTML

Start with a clean and semantic HTML structure. Use a container for the slider and individual items for each testimonial.

 <div class="testimonial-slider">
  <div class="slide">
    <p class="quote">"This product changed the way I work. Highly recommended!"</p>
    <p class="author">— Jane Doe</p>
  </div>
  <div class="slide">
    <p class="quote">"Outstanding support and amazing quality. Worth every penny."</p>
    <p class="author">— John Smith</p>
  </div>
  <div class="slide">
    <p class="quote">"Simple, elegant, and effective. Exactly what I needed."</p>
    <p class="author">— Alex Brown</p>
  </div>
</div>

2. Style with Flexbox and Animation

Use CSS Flexbox to align the slides in a row and animate them to scroll automatically.

 .testimonial-slider {
  display: flex;
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  box-sizing: border-box;
}

.slide {
  flex: 0 0 auto;
  width: 100%;
  padding: 20px;
  text-align: center;
  background: #f9f9f9;
  border-radius: 8px;
  margin: 0 10px;
  opacity: 0.6;
  transform: scale(0.95);
  transition: all 0.3s ease;
}

.slide:hover {
  opacity: 1;
  transform: scale(1);
}

.slide p.quote {
  font-style: italic;
  margin-bottom: 10px;
  color: #333;
}

.slide p.author {
  font-weight: bold;
  color: #007acc;
}

3. Create Auto-Scrolling with CSS Animation

Make the slides scroll automatically using @keyframes and animation .

 .testimonial-slider {
  display: flex;
  width: 300%; /* Adjust based on number of slides */
  animation: scroll 15s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

Note: If you have 3 slides and each takes 100% width, the total container is 300%. To scroll one full slide left, you translate by -100%.

4. Make It Responsive

Use media queries to adjust layout and animation timing for smaller screens.

 @media (max-width: 768px) {
  .slide {
    padding: 15px;
    font-size: 0.9em;
  }

  .slide p.quote {
    font-size: 0.95em;
  }
}

@media (max-width: 480px) {
  .slide {
    padding: 10px;
    margin: 0 5px;
  }

  .slide p.quote {
    font-size: 0.85em;
  }

  .slide p.author {
    font-size: 0.9em;
  }

  .testimonial-slider {
    animation: scroll 20s linear infinite;
  }
}

5. Optional: Pause on Hover

Improve UX by pausing the slider when users hover over it.

 .testimonial-slider:hover {
  animation-play-state: paused;
}

Tips for Better Results

• Add more slides? Adjust the total width (eg, 400% for 4 slides) and update the keyframes ( translateX(-300%) ).
• Want manual controls? That would require JavaScript, but for pure CSS, auto-play works great.
• Smoothness: Use will-change: transform on .testimonial-slider for better performance.
• Accessibility: Consider adding ARIA labels or a hidden list for screen readers.

Basically, with flexbox, keyframe animations, and responsive design, you can build a smooth, mobile-friendly testimonial slider using only HTML and CSS. It's lightweight, fast, and works across all modern browsers.

以上是如何使用CSS創建響應性的推薦滑塊的詳細內容。更多資訊請關注PHP中文網其他相關文章！