CSS3를 사용하여 뉴스 텍스트를 원활하게 순환 스크롤하는 방법은 무엇입니까? (예)

이 글에서는 CSS3를 사용하여 원활한 연결과 연속 루프 효과를 얻는 방법을 주로 소개합니다. 이 CSS 애니메이션 루프는 이미지뿐만 아니라 텍스트 필드 등에 적용됩니다. 이들의 공통점, 즉 주된 사상이 무엇인지 파악하면 다른 사례에 대해서도 추론할 수 있다.

1. 구체적인 HTML 코드 예시는 다음과 같습니다.

<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. 구체적인 CSS 코드는 다음과 같습니다.

@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;
}

위 CSS 루프 애니메이션을 구현하는 주요 아이디어는

예를 들어, 상향 연속 루프 애니메이션 효과를 만들려면 A를 복사하면 됩니다. 데이터 B의 동일한 복사본이 원본 데이터 A 뒤에 배치됩니다. 상향 스크롤 거리 L이 정확하게 A의 높이일 때 setInterval을 사용하여 A의 상위 컨테이너를 위로 스크롤합니다. A (L==A.height()), L=0 , 스크롤 다시 시작, 무한 루프.

A가 위쪽으로 움직일 때 뒤쪽에 빈칸을 메울 데이터가 있도록 데이터를 복사해서 뒤쪽에 넣어주세요. B가 가시 영역의 맨 위로 이동하고 A가 가시 영역 밖으로 이동하면 컨테이너는 0으로 재설정됩니다. 사용자는 이를 인식하지 못하고 여전히 B의 첫 번째 데이터라고 생각합니다. 그런 다음 계속 위로 스크롤하세요.

참고:

CSS3 속성을 사용하여 구현하려면 애니메이션이어야 합니다. 전환은 수동으로 트리거해야 하고 무한히 실행할 수 없으며 애니메이션이 이 문제를 해결할 수 있기 때문입니다.

이 글은 CSS 애니메이션 루프 소개에 관한 글입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.

위 내용은 CSS3를 사용하여 뉴스 텍스트를 원활하게 순환 스크롤하는 방법은 무엇입니까? (예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!