CSS를 사용하여 원활한 스크롤 텍스트 알림 표시줄 효과를 만드는 방법

CSS를 사용하여 원활한 스크롤 텍스트 알림 표시줄 효과를 만드는 방법

끊김 없는 스크롤 텍스트 알림 표시줄은 웹 페이지에서 흔히 사용되는 효과이며 CSS를 통해 구현할 수 있습니다. 이 문서에서는 CSS를 사용하여 원활한 스크롤 텍스트 알림 표시줄을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

원활한 스크롤 텍스트 알림 표시줄 효과를 얻으려면 먼저 텍스트를 감싸고 컨테이너의 너비, 높이 및 배경색을 설정하는 컨테이너가 필요합니다. 예를 들어 div 요소를 사용하고 다음과 같이 클래스 이름을 지정할 수 있습니다.

<div class="scrolling-text-container">
    文字通知栏内容
</div>

다음으로 텍스트 알림 표시줄의 모양과 동작을 제어하기 위해 CSS 스타일을 정의해야 합니다. 먼저 아래와 같이 컨테이너에 몇 가지 기본 스타일을 추가하겠습니다.

.scrolling-text-container {
    width: 100%;
    height: 30px;
    background-color: #f1f1f1;
    overflow: hidden;
    white-space: nowrap;
}

위 코드는 컨테이너 너비를 100%, 높이를 30픽셀로 만들고 배경색을 회색으로 설정합니다. 동시에 텍스트 알림 표시줄 외부의 콘텐츠를 숨기기 위해 오버플로 속성을 "hidden"으로 설정하여 컨테이너의 보이는 부분만 표시되도록 합니다.

다음으로, 아래와 같이 텍스트 알림 표시줄의 콘텐츠를 범위 요소로 래핑하고 이에 대한 주요 스타일 속성을 설정해야 합니다.

<div class="scrolling-text-container">
    <span class="scrolling-text">文字通知栏内容</span>
</div>

.scrolling-text {
    position: relative;
    display: inline-block;
    animation: scroll-left 10s linear infinite;
}

위 코드에서는 범위 요소에 대한 클래스 이름을 설정합니다. 필요한 스타일 속성을 정의합니다. 그 중 스크롤 애니메이션 중에 상대적인 위치를 유지하기 위해 position 속성을 "relative"로 설정했습니다. 또한 표시 속성을 "inline-block"으로 설정하여 범위 요소가 한 줄에 표시되고 컨테이너 너비를 변경하지 않고 유지합니다.

또한 텍스트가 오른쪽에서 왼쪽으로 점진적으로 스크롤되도록 하는 "왼쪽 스크롤"이라는 애니메이션을 정의했습니다. 이 애니메이션은 선형 애니메이션 효과를 사용하며 지속 시간을 10초로 설정합니다. 무한 루프를 달성하기 위해 animation-iteration-count 속성을 "infinite"로 설정합니다. 구체적인 애니메이션 코드는 다음과 같습니다.

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

위 코드의 @keyframes 규칙은 왼쪽 스크롤 애니메이션의 두 키 프레임을 정의합니다. 0%에서는 텍스트의 위치를 ​​오프셋 없이 원래 위치로 설정합니다. 100%에서는 텍스트 위치를 100% 왼쪽으로 오프셋하여 컨테이너 왼쪽에서 완전히 사라졌다가 오른쪽에서 다시 나타나도록 합니다.

마지막으로 웹페이지의 디자인과 레이아웃에 더 잘 적응하려면 텍스트 알림 표시줄에 몇 가지 추가 스타일을 추가해야 합니다. 필요에 따라 조정할 수 있습니다. 예를 들어 텍스트의 색상, 글꼴, 크기 등을 설정할 수 있으며 텍스트의 여백, 간격 등도 설정할 수 있습니다. 다음은 텍스트 알림 표시줄의 스타일을 사용자 정의하기 위한 샘플 코드 조각입니다.

.scrolling-text {
    ...
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 5px;
    margin: 0;
    letter-spacing: 1px;
}

위 코드 조각은 텍스트 알림 표시줄의 글꼴 색상을 검은색으로, 글꼴 모음을 Arial로, 백업 글꼴을 sans-serif로 설정합니다. 글꼴 크기는 16픽셀, 여백은 5픽셀, 간격은 1픽셀로 설정되었습니다.

위의 HTML 및 CSS 코드 예제를 사용하면 원활한 스크롤 텍스트 알림 표시줄 효과를 쉽게 얻을 수 있습니다. 필요에 따라 해당 스타일을 만드십시오. 이러한 방식으로 CSS를 사용하여 웹 페이지에 동적이고 매력적인 텍스트 알림 표시줄을 구현하여 사용자의 관심을 끌고 중요한 정보를 제공할 수 있습니다.

이 기사가 원활한 스크롤 텍스트 알림 표시줄을 만드는 CSS의 효과를 이해하는 데 도움이 되기를 바랍니다. CSS를 사용하여 멋진 텍스트 알림 표시줄을 만들 수 있기를 바랍니다!

위 내용은 CSS를 사용하여 원활한 스크롤 텍스트 알림 표시줄 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!