How to achieve seamless circular scrolling of news text using css3? (example)

This article mainly introduces how to use css3 to achieve seamless connection and non-stop looping effects. This css animation loop applies not only to images but also to text fields, etc. As long as you grasp what they have in common, that is, what their main ideas are, you can draw inferences about other cases.

1. The specific HTML code example is as follows:

<div class="list">
    <div class="cc rowup">
        <div class="item">1- 这是一段新闻描述一</div>
        <div class="item">2- 这是一段新闻描述二</div>
        <div class="item">3- 这是一段新闻描述三</div>
        <div class="item">4- 这是一段新闻描述四</div>
        <div class="item">5- 这是一段新闻描述五</div>
        <div class="item">6- 这是一段新闻描述六</div>
        <div class="item">7-这是一段新闻描述七</div>
  <div class="item">8-这是一段新闻描述八</div>
     <div class="item">9- 这是一段新闻描述</div>
        <div class="item">1- 这是一段新闻描述一</div>
        <div class="item">2- 这是一段新闻描述二</div>
        <div class="item">3- 这是一段新闻描述三</div>
        <div class="item">4- 这是一段新闻描述四</div>
        <div class="item">5- 这是一段新闻描述五</div>
        <div class="item">6- 这是一段新闻描述六</div>
        <div class="item">7- 这是一段新闻描述七</div>
        <div class="item">8- 这是一段新闻描述八</div>
     <div class="item">9- 这是一段新闻描述</div>
    </div>
</div>

2. The specific css code is as follows:

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -307px, 0);
        transform: translate3d(0, -307px, 0);
    }
}
.list{
    width: 300px;
    border: 1px solid #999;
    margin: 20px auto;
    position: relative;
    height: 200px;
    overflow: hidden;
}
 
.list .rowup{
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    position: relative;
}

The main idea of ​​the above css loop animation implementation is,

For example, if we want to make an upward seamless loop animation effect, we can copy A's identical data B and place it behind the original data A; use setInterval to scroll A's parent container upward; when the upward scrolling distance L is exactly A's When the height is (L==A.height()), L=0, the scrolling starts again, and the loop is endless.

Copy a copy of the data and place it at the back so that when A moves upward, there will be data at the back to fill in the gaps. When B moves to the top of the visible area, and A just moves out of the visible area, the container is reset to 0. The user does not perceive it and thinks it is still the first piece of data in B. Then keep scrolling up.

Note:

If you want to use CSS3 attributes to implement it, it must be animation, because transition needs to be triggered manually and cannot be executed infinitely, and animation can solve this problem. .

This article is about the introduction of css animation loop, I hope it will be helpful to friends in need.

The above is the detailed content of How to achieve seamless circular scrolling of news text using css3? (example). For more information, please follow other related articles on the PHP Chinese website!