부드러운 순수한 CSS 텍스트 슬라이더를 만듭니다

이 기사에서는 순수한 CSS를 사용하여 부드러운 텍스트 슬라이더를 만들고 텍스트 중첩 문제를 해결하며 오른쪽에서 왼쪽으로 슬라이딩 효과를 달성하는 방법을 안내합니다. 키 프레임의 왼쪽 속성을 조정함으로써 텍스트는 화면에서 완전히 이동 한 후에 만 ​​재설정되어 슬라이딩 중에 겹치지 않고 궁극적으로 부드러운 시각적 경험을 달성합니다. 이 튜토리얼은 아름답고 실용적인 CSS 텍스트 슬라이더를 쉽게 구축 할 수 있도록 자세한 코드 예제 및 주요 단계를 제공합니다.

구현 원리

핵심 아이디어는 각 텍스트 항목의 왼쪽 속성을 제어하고 화면 오른쪽에서 이동하고 화면에 잠시 동안 유지 한 다음 화면의 왼쪽에서 옮기고 화면에서 벗어나는 것입니다. 애니메이션 루프가 시작될 때 텍스트 항목이 화면 오른쪽으로 즉시 재설정됩니다. 이 재설정에는 애니메이션 효과가 없기 때문에 사용자는이를 볼 수 없습니다.

특정 단계

1. HTML 구조

   여러 텍스트 항목이 포함 된 컨테이너를 사용하십시오. 각 텍스트 항목은 CSS 애니메이션을 통해 위치를 제어 할 수 있도록 절대 포지셔닝으로 설정해야합니다.

    <div class="Trev-top-bar Overflow-hidden" style="높이 : 56px;">
     <div class="Container-Fluid">
       <div class="행 위치 관계">
         <div class="col-12 col-md trev-top-bar-item text-center position-absolute">
           <i class="trev-top-bar-fa-icon fa-solid fa-truck-fast"> </i> 빠른 배송
         </div>
   
         <div class="col-12 col-md trev-top-bar-item text-center position-absolute">
           <i class="trev-top-bar-fa-icon fa-solid fa-arrow-right-arrow-left"> </i> 100 일의 반환
         </div>
   
         <div class="col-12 col-md trev-top-bar-item text-center position-absolute">
           <i class="trev-top-bar-fa-icon fa-solid fa-file-invoice-dollar"> 송장으로 구매하십시오
         </i>
   </div>
   
         <div class="col-12 col-md trev-top-bar-item text-center position-absolute">
           <i class="trev-top-bar-fa-icon fa-solid fa-gears"> </i> 입증 된 품질
         </div>
       </div>
     </div>
   </div>

   여기에서 부트 스트랩 클래스는 레이아웃을 지원하는 데 사용되며 글꼴 멋진 아이콘이 사용됩니다.

2. CSS 스타일

   • 배경색, 글꼴 색상, 글꼴 크기 및 여백과 같은 컨테이너 스타일을 설정합니다.
   • 절대 포지셔닝과 같은 텍스트 항목 스타일을 설정합니다.
   • 키 프레임 애니메이션을 정의하고 각 텍스트 항목의 왼쪽 속성을 제어하십시오.

    .trev-top-bar {
     배경색 : #256dff;
     색상 : #ffff;
     글꼴 크기 : 14px;
     패딩 탑 : 1rem;
     패딩 바닥 : 1rem;
   }
   
   .trev-top-bar .trev-top-bar-item : First-Child {
     -webkit-Animation : Top-Bar-Animation-1 16S가 무한한 편안;
     애니메이션 : 탑 바-애니메이션 -1 16s는 무한한 편안함;
   }
   
   .trev-top-bar .trev-top-bar-item : nth-Child (2) {
     -webkit- 애니메이션 : 최상위 바-애니메이션 -2 16s는 무한한 편안함;
     애니메이션 : 탑 바-애니메이션 -2 16s는 무한한 편안함;
   }
   
   .trev-top-bar .trev-top-bar-item : nth-Child (3) {
     -webkit-Animation : Top-Bar-Animation-3 16S EASENFINITE;
     애니메이션 : 탑 바-애니메이션 -3 16s는 무한한 편안함;
   }
   
   .trev-top-bar .trev-top-bar-item : nth-Child (4) {
     -webkit-Animation : Top-Bar-Animation-4 16S EASENFINITE;
     애니메이션 : 탑 바-애니메이션 -4 16s는 무한한 편안함;
   }
   
   .trev-top-bar .trev-top-bar-fa-icon,
   .trev-top-bar .icon {
     색상 : #ffff;
     마진 오른쪽 : .3rem;
   }
   
   .trev-top-bar .trev-top-bar-fa-icon {
     글꼴 크기 : 16px;
   }
   
   .trev-top-bar .icon svg {
     너비 : 16px;
     높이 : 16px;
   }
   
   @keyframes top-bar-animation-1 {
     0% {
       왼쪽 : 100%;
     }
     8.33% {
       왼쪽 : 0;
     }
     16.66% {
       왼쪽 : 0;
     }
     24.99% {
       왼쪽 : -100%;
     }
     100% {
       왼쪽 : -100%;
     }
   }
   
   @keyframes top-bar-animation-2 {
     0% {
       왼쪽 : 100%;
     }
     24.99% {
       왼쪽 : 100%;
     }
     33.33% {
       왼쪽 : 0;
     }
     41.66% {
       왼쪽 : 0;
     }
     49.99% {
       왼쪽 : -100%;
     }
     100% {
       왼쪽 : -100%;
     }
   }
   
   @keyframes top-bar-animation-3 {
     0% {
       왼쪽 : 100%;
     }
     49.99% {
       왼쪽 : 100%;
     }
     58.33% {
       왼쪽 : 0;
     }
     66.66% {
       왼쪽 : 0;
     }
     74.99% {
       왼쪽 : -100%;
     }
     100% {
       왼쪽 : -100%;
     }
   }
   
   @keyframes top-bar-animation-4 {
     0% {
       왼쪽 : 100%;
     }
     74.99% {
       왼쪽 : 100%;
     }
     83.33% {
       왼쪽 : 0;
     }
     91.66% {
       왼쪽 : 0;
     }
     100% {
       왼쪽 : -100%;
     }
   }

   키 프레임 설명 :

   • 0%: 텍스트 항목은 화면 오른쪽에 있습니다 (왼쪽 : 100%).
   • 8.33% (첫 번째 텍스트 항목의 경우) : 텍스트 항목이 화면에 들어가기 시작합니다 (왼쪽 : 0).
   • 16.66% (첫 번째 텍스트 항목의 경우) : 텍스트 항목이 화면에 완전히 표시됩니다 (왼쪽 : 0).
   • 24.99% (첫 번째 텍스트 항목의 경우) : 텍스트 항목이 화면에서 벗어나기 시작합니다 (왼쪽 : -100%).
   • 100%: 텍스트 항목이 화면에서 완전히 제거되었습니다 (왼쪽 : -100%).

   각 텍스트 항목의 애니메이션 시작 시간은 연속 슬라이딩 효과를 달성하기 위해 다릅니다. 애니메이션 지연 조정은 각 텍스트 항목의 발생 시간을 제어 할 수 있습니다.

3. 필요한 라이브러리를 소개합니다

   Font Awesome과 Bootstrap 용 CSS 파일을 소개하십시오.

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="Stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="Stylesheet">

주목해야 할 것

• 텍스트 항목이 넘치지 않도록 컨테이너에 오버플로가 있는지 확인하십시오.
• 최상의 시각적 효과를 얻으려면 실제 요구에 따라 애니메이션 시간과 지연을 조정하십시오.
• 키 프레임에서 불필요한 중간 상태를 사용하지 말고 애니메이션 프로세스를 단순화하십시오.
• 보다 복잡한 애니메이션 효과 (예 : 페이드)를 지원 해야하는 경우 JavaScript를 사용하여 구현을 지원하는 것을 고려할 수 있습니다.

요약

위의 단계를 통해 순수한 CSS를 사용하여 부드러운 텍스트 슬라이더를 만들어 텍스트 중첩 문제를 피하고 오른쪽에서 왼쪽으로 슬라이딩 효과를 얻을 수 있습니다. 이 방법은 JavaScript에 의존하지 않고 간단하고 이해하기 쉽고 고성능 요구 사항이있는 시나리오에 적합합니다. 이 기술을 마스터하면 웹 사이트 나 응용 프로그램에 매력적인 동적 효과가 추가 될 수 있습니다.

위 내용은 부드러운 순수한 CSS 텍스트 슬라이더를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!