关于纯CSS垂直滚动marquee的两个问题求助（Blogger博客）

Hey there! Let's work through those two frustrating problems with your vertical marquee. I've got straightforward fixes for both:

1. Setting Text Color to #0093dd #

The issue here is likely that your <p> tag is inheriting text color styles from other parts of your Blogger theme, and your current CSS doesn't explicitly override that. The simple fix is to add a color property directly to the #marquee p selector—this ensures your desired color takes precedence.

2. Slowing Down the Scroll Speed (Even with 100s Set) #

Your padding-top: 100% on the <p> tag forces it to have a fixed height equal to the container's width, not the actual height of your content. That means the animation is scrolling this fixed height over 100s, which feels fast if your content is longer. We'll remove that padding and let the <p> tag's height be determined by its content, then adjust the animation duration to match the content length.

Modified CSS Code #

#marquee {
  width: 100%;
  height: 410px;
  overflow: hidden;
}
#marquee p {
  display: block; /* Changed from inline-block to respect content height */
  color: #0093dd; /* Explicitly set your desired text color */
  margin: 0; /* Remove default paragraph margins to avoid spacing gaps */
  animation: marquee 250s linear infinite; /* Increased duration for slower scroll */
}
#marquee p:hover {
  animation-play-state: paused;
}
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -100%); /* Now scrolls the full height of your content */
  }
}

Simplified HTML Structure #

You can trim the extra div (it's not needed unless you're using it for additional styling):

<div id="marquee">
  <p>Your full scrolling content goes here—all the text you want to roll vertically!</p>
</div>

Quick Tips #

• If the text color still doesn't apply, add !important to the color property: color: #0093dd !important; (this will override any stubborn inherited theme styles).
• Tweak the 250s value in the animation property to adjust speed—go higher for slower scroll, lower for faster, until it feels perfect for your content length.

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