CSS를 사용하여 선택 윤곽 효과를 만드는 방법

CSS를 사용하여 선택 윤곽 효과를 얻는 방법에 대한 단계

선택 윤곽 효과는 웹 페이지에서 지속적으로 스크롤되는 텍스트나 그림을 표시하여 페이지에 움직임과 활력을 추가하는 일반적인 프런트 엔드 특수 효과입니다. 이 문서에서는 CSS를 사용하여 윤곽 효과를 얻는 방법에 대한 구체적인 단계를 소개하고 참조할 수 있는 해당 코드 예제를 제공합니다.

1단계: HTML 구조 만들기

먼저, 선택 윤곽 효과를 얻으려면 HTML로 컨테이너를 만들어야 합니다. 아래와 같이 div 요소를 컨테이너로 사용할 수 있습니다.

<div class="marquee-container">
  <ul class="marquee-content">
    <li>跑马灯内容1</li>
    <li>跑马灯内容2</li>
    <li>跑马灯内容3</li>
    <!-- 添加更多的跑马灯内容 -->
  </ul>
</div>

위 코드에서는 "marquee-container" 클래스를 선택 윤곽 컨테이너로 사용하여 div 요소를 생성하고 이 컨테이너 내부에 " "marquee-content"의 ul 요소는 선택 윤곽의 내용을 수용하는 데 사용됩니다.

2단계: CSS 스타일 설정

다음으로 컨테이너와 콘텐츠에 해당하는 CSS 스타일을 설정해야 합니다. 구체적인 단계는 다음과 같습니다.

1. 컨테이너의 너비와 높이를 설정하고 상대 위치(위치: 상대)로 설정하여 컨테이너 내에서 선택 윤곽 콘텐츠를 배치합니다.

.marquee-container {
  width: 100%;
  height: 100px;
  position: relative;
}

2. 콘텐츠 스타일과 스크롤 효과를 설정하세요. 콘텐츠의 ul 요소를 절대 위치(position:absolute)로 설정하고 콘텐츠가 가로로 스크롤될 수 있도록 너비를 더 큰 값으로 설정합니다.

.marquee-content {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  white-space: nowrap; /* 防止内容换行 */
  animation: marquee 10s linear infinite; /* 设置滚动效果 */
}

@keyframes marquee {
  0% { transform: translateX(0%); } /* 初始状态，内容从左侧显示 */
  100% { transform: translateX(-100%); } /* 结束状态，内容向左滚动完全消失 */
}

위 코드에서는 "marquee"라는 @keyframes 애니메이션을 설정하여 변환 속성의 TranslateX 함수를 통해 콘텐츠의 가로 스크롤을 구현했습니다. 초기 상태 0%를 수평 오프셋 0%로, 최종 상태 100%를 수평 오프셋 -100%로 설정하고(즉, 콘텐츠가 완전히 사라질 때까지 왼쪽으로 스크롤) 애니메이션을 10초 동안 선형으로 지속하도록 설정합니다. 모션 및 무한 루프.

3단계: 용기와 콘텐츠의 표시 효과 조정

마지막으로 실제 필요에 따라 용기와 콘텐츠의 표시 효과를 조정할 수 있습니다. 예를 들어 페이지의 전체 스타일에 더 잘 어울리도록 컨테이너의 배경색, 테두리, 여백 등을 설정할 수 있습니다. 동시에 콘텐츠의 글꼴, 색상, 글꼴 크기 등을 설정하고 일부 CSS 전환 효과를 추가하여 선택 윤곽의 부드러움을 높일 수도 있습니다.

.marquee-container {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  margin: 20px;
}

.marquee-content li {
  font-family: Arial, sans-serif;
  color: #333;
  font-size: 16px;
  padding: 10px;
  transition: color 0.3s ease-in-out;
}

.marquee-content li:hover {
  color: #ff0000; /* 鼠标悬停时改变文字颜色 */
}

위 코드에서는 컨테이너의 배경색을 #f2f2f2로, 테두리를 1px의 단색 #ccc로 설정하고, 여백을 20px로 설정했습니다. 동시에 콘텐츠의 글꼴을 Arial로, 색상을 #333으로, 글꼴 크기를 16px로 설정하고, 콘텐츠에 대해 0.3초 색상 전환 효과를 설정하여 텍스트 색상이 점차 빨간색으로 변하도록 했습니다. 마우스가 떠있습니다.

요약하자면, 위의 단계를 통해 CSS를 사용하여 간단한 선택 윤곽 효과를 얻을 수 있습니다. 물론 실제 필요에 따라 이 효과를 더욱 확장하고 최적화할 수 있습니다. 위 내용이 도움이 되었기를 바랍니다!

위 내용은 CSS를 사용하여 선택 윤곽 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!