집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 가로 스크롤 뉴스 칼럼 효과를 만드는 방법

CSS를 사용하여 가로 스크롤 뉴스 칼럼 효과를 만드는 방법

WBOY원래의: 2023-10-18 10:09:271402검색

CSS를 사용하여 가로 스크롤 뉴스 칼럼 효과를 얻는 방법

웹 디자인에서는 뉴스 콘텐츠의 표시 효과와 사용자 경험을 높이기 위해 가로 스크롤 뉴스 칼럼 효과를 자주 사용합니다. 이 기사에서는 CSS를 사용하여 가로 스크롤 뉴스 칼럼을 구현하는 구체적인 단계를 소개하고 참조용 코드 예제를 제공합니다.

HTML 구조 만들기

먼저 HTML로 div 컨테이너를 만들어 뉴스 콘텐츠를 래핑합니다. 예:

<div class="news-container">
  <ul class="news-list">
    <li>新闻1</li>
    <li>新闻2</li>
    <li>新闻3</li>
    <li>新闻4</li>
    <li>新闻5</li>
  </ul>
</div>

CSS 스타일 설정

다음으로 CSS에서 컨테이너 스타일과 뉴스 목록 스타일을 설정합니다. 예:

.news-container {
  width: 100%;
  overflow-x: scroll;  // 设置横向滚动
}

.news-list {
  display: flex;  // 设置新闻列表为弹性布局
  width: fit-content;  // 设置列表宽度为内容宽度
  white-space: nowrap;  // 防止新闻换行
}

.news-list li {
  padding: 10px;  // 设置新闻项的内边距
  margin-right: 10px;  // 设置新闻项之间的间距
}

애니메이션 효과 추가

뉴스바 스크롤을 만들기 위해 CSS 애니메이션을 사용할 수 있습니다. 먼저 뉴스 목록의 변위를 제어하는 키프레임 애니메이션을 정의합니다. 예:

@keyframes move-news {
  0% {
    transform: translateX(0);  // 初始位置
  }
  100% {
    transform: translateX(-100%);  // 最终位置
  }
}

그런 다음 뉴스 목록에 애니메이션을 적용합니다. 예:

.news-list {
  animation: move-news 10s linear infinite;  // 每10秒执行一次动画，使用线性缓动，并且无限循环
}

완벽한 효과

사용자 경험을 높이기 위해 마우스를 올리면 애니메이션이 일시 중지되는 효과를 추가할 수 있습니다. CSS에 다음 스타일을 추가하세요.

.news-container:hover .news-list {
  animation-play-state: paused;  // 鼠标悬停时暂停动画
}

이제 CSS를 사용하여 가로 스크롤 뉴스 칼럼 효과를 구현하는 주요 단계가 완료되었습니다.

전체 코드 예제는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .news-container {
      width: 100%;
      overflow-x: scroll;
    }

    .news-list {
      display: flex;
      width: fit-content;
      white-space: nowrap;
      animation: move-news 10s linear infinite;
    }

    .news-list li {
      padding: 10px;
      margin-right: 10px;
    }

    @keyframes move-news {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }

    .news-container:hover .news-list {
      animation-play-state: paused;
    }
  </style>
</head>
<body>
  <div class="news-container">
    <ul class="news-list">
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
      <li>新闻5</li>
    </ul>
  </div>
</body>
</html>

Summary

위 단계를 통해 CSS를 사용하여 가로 스크롤 뉴스 칼럼 효과를 얻을 수 있습니다. 이 효과는 여러 뉴스 콘텐츠를 잘 표시하고 페이지의 역동적인 느낌과 사용자 상호 작용성을 높일 수 있습니다. 보다 유연하고 다양한 스크롤 효과를 얻기 위해 실제 필요에 따라 스타일 및 애니메이션 매개변수를 조정할 수 있습니다.

위 내용은 CSS를 사용하여 가로 스크롤 뉴스 칼럼 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html

성명：

이전 기사：CSS 레이아웃 튜토리얼: 위치 레이아웃을 구현하는 가장 좋은 방법다음 기사：CSS 레이아웃 튜토리얼: 위치 레이아웃을 구현하는 가장 좋은 방법