CSS를 사용하여 캐러셀을 만드는 방법은 무엇입니까?

Carousel은 인터넷에서 매우 유명합니다. Web Carousel은 귀중한 웹 사이트 공간을 보존하면서 유사한 콘텐츠를 하나의 촉각적 장소로 구성하는 우아한 방법입니다. 사진을 표시하고, 제품을 제공하고, 새로운 방문자의 관심을 끄는 데 사용됩니다. 그러나 얼마나 효과적입니까? 성능 향상을 위해 캐러셀을 사용하는 방법에 대한 연구뿐만 아니라 캐러셀에 반대하는 많은 주장이 있습니다. 하지만 캐러셀은 웹사이트 사용성에 어떤 영향을 미칠까요?

이 글에서는 캐러셀의 기본 사항과 HTML 및 CSS를 사용하여 캐러셀을 만드는 방법에 대해 설명합니다.

캐러셀이란 무엇인가요?

회전식 슬라이드쇼는 일련의 회전하는 배너/이미지를 표시하는 슬라이드 쇼입니다. 캐러셀은 일반적으로 웹사이트의 홈 페이지에 표시됩니다. 귀하의 웹 사이트의 모양을 향상시킵니다. 슬라이더, 갤러리 및 슬라이드쇼라고도 알려진 웹 캐러셀을 사용하면 동적 "Sliding" 블록에 텍스트, 그래픽, 이미지, 비디오까지 표시할 수 있습니다. 콘텐츠와 컨셉을 그룹화하고 특정 콘텐츠 간의 시각적 링크를 생성하는 데 탁월한 디자인 선택입니다.

따라서 웹 캐러셀은 전자 상거래 사이트에서 관련 제품을 홍보하거나, 디자인 포트폴리오의 주요 프로젝트를 소개하거나, 부동산 웹사이트에서 집 내부 및 외부 사진을 반복적으로 보여주는 데 이상적입니다. 그러나 항상 최선의 선택은 아닙니다.

많은 디자이너들이 로딩 시간을 늦추고 디자인의 흐름을 망친다고 비난합니다. 그러나 디자인과 관련된 모든 것과 마찬가지로 올바르게 수행되면 웹 캐러셀도 더 쉽게 탐색할 수 있는 방식으로 콘텐츠를 분할할 수 있습니다.

웹페이지 캐러셀을 만드는 방법은 무엇인가요?

여기에서는 부트스트랩과 같은 프레임워크를 사용하지 않고 간단한 웹 캐러셀을 만드는 방법을 살펴보겠습니다.

따라야 할 단계

• HTML을 사용하여 이미지가 포함된 회전 랜턴의 기본 구조를 만듭니다. 아래 예에서는 회전문에 4개의 이미지를 추가했습니다. 또한 4개의 버튼이 있으며 클릭하면 해당 이미지가 표시됩니다.

• 먼저 title 및 content을 포함하는 div 요소를 컨테이너로 만듭니다.

• 이제 content div에는 carousel content(전환 내내 고정된 텍스트 부분 포함)와 slideshow(움직이는 부분, 즉 4개의 이미지 및 버튼 포함)의 두 부분이 포함됩니다.

• CSS를 사용하여 캐러셀 이미지와 버튼의 스타일을 지정하세요. 슬라이드의 위치를 ​​상대 위치로 유지합니다.

• CSS 애니메이션을 사용하여 캐러셀의 이미지를 원활하게 전환하세요.

Example

의 중국어 번역은

Example

입니다.

다음 예에서는 4개의 이미지가 포함된 캐러셀과 이미지 표시를 제어하는 ​​버튼을 보여줍니다. 이러한 이미지는 일정한 간격으로 전환되어 표시됩니다.

으아악

CSS 변환 속성

비주얼 형식 모델에서 사용하는 좌표 공간을 수정하려면 CSS의 변환 속성을 사용하세요. 이렇게 하면 요소에 기울기, 회전, 이동 등의 효과를 적용할 수 있습니다.

문법

으아악

가치

• translate(x, y) − 이 함수는 X 및 Y 좌표에 따른 이동을 정의합니다.

• translate3d(x, y, z) − 이 함수는 X, Y 및 Z 좌표축을 따라 번역을 제공합니다.

• initial − 요소를 기본값으로 설정합니다.

• inherit − 상위 요소의 값을 상속합니다.

CSS 애니메이션

CSS의 애니메이션 속성을 사용하면 특정 시간 간격 내에 요소의 다양한 스타일 속성을 변경하여 애니메이션 효과를 추가할 수 있습니다.

애니메이션의 일부 기능은 다음과 같습니다.

• Animation-name - 애니메이션의 이름을 지정할 수 있으며, 이후 @keyframes에서 애니메이션을 실행하기 위한 CSS 규칙을 지정하는 데 사용됩니다.

• 애니메이션 기간 - 애니메이션 기간 설정

• 애니메이션 시간 함수 - 애니메이션의 속도 곡선, 즉 애니메이션이 CSS 사용자 정의 속성 집합에서 다른 집합으로 변경하는 데 사용하는 시간 간격을 나타냅니다.

• Animation-delay - 주어진 간격 동안 시작 값에 대한 지연 설정

@keyframes는 주어진 기간 내에 애니메이션에서 실행되어야 하는 코드를 지정하는 데 사용됩니다. 이는 애니메이션 중 특정 "프레임"에 대한 CSS 속성을 0%(애니메이션 시작)에서 100%(애니메이션 끝) 범위의 백분율로 선언하여 수행됩니다.

위 내용은 CSS를 사용하여 캐러셀을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!