Css3 implements horizontal infinite scrolling effect (ul dynamically set ul width when element under uncertainty)

In HTML page circular display information function is generally used to achieve JS, so how to achieve with CSS3

Use CSS3 to achieve

If CSS3 properties are used, only animation properties can be entrusted with the responsibility

html:

  <div class="container">
    <ul>
      <li>I am 001</li>
      <li>I am 002</li>
      <li>I am 003</li>
      <li>I am 004</li>
      <li>I am 005</li>
      <li>I am 006</li>
      <li>I am 007</li>
      <li>I am 008</li>
      <li>I am 009</li>
    </ul>
  </div>
Copy the code

Width: max-content; Property to keep the width of ul elements equal to the sum of the widths of all li elements. Let’s try that

css

* {
  padding: 0;margin: 0;
}
ul,li {
  list-style: none;
}
.container {
  position: absolute;
  width: 500px;
  height: 200px;
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: pink;
}
ul {
  display: flex;
  justify-content: flex-start;
  width: max-content;
  animation: slideLeft 5s linear 0s infinite;
}
li {
  float: left;
  padding-right: 20px;
}
@keyframes slideLeft {
  0% {
    transform: translateX(500px);
  }
  100% {
    transform: translateX(-100%);
  }
}
Copy the code

Try it out for yourself in Codepen, preview the address

If you solve the problem, don’t forget to like it before you leave.