关于网站使用三盒子CSS文字轮播代码片段的技术咨询

Hey there! Your snippet was missing a few critical pieces (like the actual animation keyframes and corresponding HTML structure) to work properly. Let's walk through everything you need to get this text slider up and running smoothly.

1. Full Working Code (HTML + Completed CSS) #

First, here's the full, functional version of your slider— I've filled in the missing animation logic and added the required HTML structure to anchor the absolute-positioned items:

HTML #

<!-- Wrap slider items in a container to contain absolute positioning -->
<div class="slider-container">
  <div class="item-1">First featured text message</div>
  <div class="item-2">Second featured text message</div>
  <div class="item-3">Third featured text message</div>
</div>

CSS #

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600); 
body { 
  font-family: 'Open Sans', 'sans-serif'; 
  color: #cecece; 
  background: #222; 
  overflow: hidden; 
}

/* Add relative positioning to container to anchor absolute items */
.slider-container {
  position: relative;
  width: 60%;
  margin: 2em auto 0; /* Center container horizontally */
}

.item-1, .item-2, .item-3 { 
  position: absolute; 
  display: block; 
  width: 100%; 
  font-size: 2em; 
  animation-duration: 20s; 
  animation-timing-function: ease-in-out; 
  animation-iteration-count: infinite;
  opacity: 0; /* Start all items hidden */
}

/* Animation for first item */
.item-1 {
  animation-name: slide1;
}

/* Animation for second item (delayed by 1/3 of total duration) */
.item-2 {
  animation-name: slide2;
  animation-delay: 6.66s;
}

/* Animation for third item (delayed by 2/3 of total duration) */
.item-3 {
  animation-name: slide3;
  animation-delay: 13.33s;
}

/* Keyframe definitions for smooth fade/slide transition */
@keyframes slide1 {
  0%, 32% { opacity: 0; transform: translateY(20px); }
  33%, 65% { opacity: 1; transform: translateY(0); }
  66%, 100% { opacity: 0; transform: translateY(-20px); }
}

@keyframes slide2 {
  0%, 32% { opacity: 0; transform: translateY(20px); }
  33%, 65% { opacity: 1; transform: translateY(0); }
  66%, 100% { opacity: 0; transform: translateY(-20px); }
}

@keyframes slide3 {
  0%, 32% { opacity: 0; transform: translateY(20px); }
  33%, 65% { opacity: 1; transform: translateY(0); }
  66%, 100% { opacity: 0; transform: translateY(-20px); }
}

2. Step-by-Step Usage Guide #

• Step 1: Integrate the Code
  Paste the HTML snippet into the section of your website where you want the slider to appear. Add the CSS either inside a <style> tag in your <head>, or link it as an external CSS file.

• Step 2: Customize Content
  Replace the text inside .item-1, .item-2, and .item-3 with your own messages—keep them concise to fit the slider width.

• Step 3: Adjust Styling
  Tweak these values to match your site's design:

  • font-size: Change the size of the slider text
  • animation-duration: Modify the total cycle length (e.g., 15s for faster rotation)
  • color/background: Update text and background colors to fit your theme
  • width (on .slider-container): Adjust how much horizontal space the slider takes up

3. Common Troubleshooting & Technical Tips #

• Animation isn't playing: Double-check that your keyframe names match the animation-name property on each item—typos are a common culprit. Also ensure you're using a modern browser (all major browsers support CSS animations).
• Slider items overlap with other content: The .slider-container uses position: relative to contain the absolute-positioned items. If you still see overlap, add a min-height to the container matching the height of your slider text.
• Want a different transition effect?: Modify the transform property in the keyframes—try translateX() for horizontal slides, or remove the transform entirely for a simple fade.
• Responsive adjustments: Use media queries to reduce font-size on mobile devices, e.g.:

  @media (max-width: 768px) {
    .item-1, .item-2, .item-3 { font-size: 1.2em; }
    .slider-container { width: 90%; }
  }
  

内容的提问来源于stack exchange，提问作者Thomas Stahl