News ticker css

A news ticker! Here's a basic CSS example to get you started:

HTML

<div class="news-ticker">
  <ul>
    <li>News item 1</li>
    <li>News item 2</li>
    <li>News item 3</li>
    <!-- Add more news items here -->
  </ul>
</div>

CSS

.news-ticker {
  position: relative;
  width: 300px; /* adjust to your desired width */
  height: 30px; /* adjust to your desired height */
  overflow: hidden;
  background-color: #f0f0f0; /* adjust to your desired background color */
  border: 1px solid #ccc; /* adjust to your desired border style */
  padding: 5px; /* adjust to your desired padding */
  font-size: 14px; /* adjust to your desired font size */
  font-family: Arial, sans-serif; /* adjust to your desired font family */
}

.news-ticker ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-ticker li {
  display: inline-block;
  margin-right: 10px; /* adjust to your desired margin */
}

.news-ticker li:last-child {
  margin-right: 0; /* remove margin from last item */
}

.news-ticker.ticker-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.news-ticker.ticker-wrap ul {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-ticker.ticker-wrap li {
  display: inline-block;
  margin-right: 10px; /* adjust to your desired margin */
}

.news-ticker.ticker-wrap li:last-child {
  margin-right: 0; /* remove margin from last item */
}

/* Animation styles */
.news-ticker.ticker-wrap ul {
  animation: ticker 10s linear infinite;
}

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

How it works

  1. The .news-ticker container has a relative position, and its child elements are absolute positioned.
  2. The .ticker-wrap container has a relative position and contains the list of news items.
  3. The list items are displayed as inline-block elements, and their margins are adjusted to create a smooth scrolling effect.
  4. The animation is triggered on the .ticker-wrap container, which translates the list of news items to the left by 100% of its width, creating a scrolling effect.
  5. The animation is set to repeat every 10 seconds.

Customization

You can adjust the styles to fit your desired design and layout. Some options to consider: