Vue는 천막/텍스트 스크롤 효과를 인식합니다

VUE에서 Marquee/Text 스크롤 효과를 구현하면 CSS 애니메이션 또는 타사 라이브러리를 사용할 수 있습니다. 이 기사에서는 CSS 애니메이션 사용 방법을 소개합니다. 스크롤 텍스트 생성 및

로 텍스트를 랩합니다. CSS 애니메이션을 정의하고 오버플로를 설정하십시오 : 숨겨진, 너비 및 애니메이션. 키 프레임을 정의하고 애니메이션의 시작과 끝에서 변환을 설정하십시오 : translatex (). 지속 시간, 스크롤 속도 및 방향과 같은 애니메이션 속성을 조정하십시오.

Vue는 천막/텍스트 스크롤 효과를 인식합니다

그것을 달성하는 방법?

VUE에서 Marquee/Text 스크롤 효과를 구현하면 CSS 애니메이션 또는 타사 라이브러리를 사용할 수 있습니다. 이 기사는 CSS 애니메이션을 사용하는 방법을 소개합니다.

자세한 설명 단계 :

1. 스크롤 텍스트 생성 : vue 템플릿에서 스크롤 해야하는 텍스트를 랩핑하십시오 (예 : <div class="marquee"><p>{{ text }}</p></div> .
2. CSS 애니메이션 정의 : <style></style> 태그에서 CSS 애니메이션을 정의하십시오.

 <code class="css">.marquee { overflow: hidden; width: 100%; white-space: nowrap; animation: marquee 10s infinite linear; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }</code>

• overflow: hidden 컨테이너 부분을 넘어 텍스트를 숨 깁니다.
• width: 100% 컨테이너 너비를 텍스트 너비로 설정합니다.
• animation 애니메이션 이름, 지속 시간, 반복 수 및 재생 모드를 정의합니다.
• @keyframes 애니메이션 키 프레임을 정의하고, 애니메이션이 시작될 때 0% 애니메이션이 끝날 때 100% 의미합니다.

3. 애니메이션 속성 조정 : 시간, 스크롤 속도 또는 방향과 같은 필요에 따라 애니메이션 속성을 조정하십시오.

예:

 <code class="vue"><template> <div class="marquee"><p>{{ text }}</p></div> </template> <script> export default { data() { return { text: &#39;这是一条跑马灯&#39; }; } }; </script> <style> .marquee { overflow: hidden; width: 100%; white-space: nowrap; animation: marquee 10s infinite linear; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style></code>

알아채다:

• 애니메이션 지속 시간을 조정하여 스크롤 속도를 제어 할 수 있습니다.
• 스크롤 방향은 transform: translateX() transform: translateX(100%) 값의 값의 기호를 변경하여 텍스트를 오른쪽으로 스크롤하여 제어 할 수 있습니다.
• 컨테이너 폭이 텍스트 너비보다 작도록 컨테이너 너비를 조정하여 스크롤 거리를 제어 할 수 있습니다.

위 내용은 Vue는 천막/텍스트 스크롤 효과를 인식합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!