HTML과 CSS를 사용하여 슬라이드쇼 작성

일반적으로 개발자는 JavaScript를 사용하여 HTML 코드에 동작을 추가합니다. 때로는 CSS를 사용하여 HTML 코드에 동작을 추가할 수도 있습니다. 예를 들어 JavaScript를 사용하는 대신 HTML 및 CSS를 사용하여 슬라이드쇼를 만들 수 있습니다.

.

맞춤형 키프레임을 만들어 슬라이드에 애니메이션을 적용하고 슬라이드쇼를 만들 수 있습니다.

문법

사용자는 아래 구문에 따라 HTML과 CSS만 사용하여 슬라이드쇼를 만들 수 있습니다.

으아악

위 구문에서 '슬라이드' div에는 여러 슬라이드가 포함되어 있습니다. 포함된 전체 슬라이드 수를 기준으로 '슬라이드' div의 너비를 정의합니다. 또한 슬라이드쇼 div에 애니메이션을 추가했습니다.

슬라이드쇼 키프레임에서 'margin-left' CSS 속성 값을 변경하여 슬라이드를 변경합니다.

단계

1단계 - div 요소를 만들고 '상위' 클래스 이름을 지정합니다.

2단계 - 중첩된 div 요소를 만들고 '슬라이드' 클래스 이름을 지정합니다. 또한 슬라이드를 나타내는 '요소' 클래스 이름으로 여러 개의 중첩된 div 요소를 만듭니다.

3단계 – 또한 클래스 이름이 'element'인 div 요소에 슬라이드의 내용을 추가합니다.

4단계 – 이제 슬라이드쇼에 대한 CSS 코드를 추가해야 합니다. '상위' div 요소에 고정된 너비와 높이를 지정하세요.

5단계

– 슬라이드인 '요소' div의 고정 너비와 높이를 설정합니다.

6단계

– '슬라이드' div의 경우 포함된 총 슬라이드 수에 따라 총 너비를 계산하고 특정 기간 동안 '슬라이드쇼' 애니메이션을 추가합니다.

7단계

– 슬라이드를 변경하려면 'margin-left' CSS 속성 값을 변경해야 하는 '슬라이드쇼' 키프레임을 만듭니다. 또한 슬라이드가 4개 있으므로 20의 간격으로 백분율을 분석했습니다. 예

아래 예에서는 4개의 슬라이드를 만들고 텍스트 콘텐츠를 추가했습니다. 또한 "n번째 하위" 의사 선택기를 사용하여 n번째 슬라이드를 선택하고 글꼴 크기와 텍스트 색상을 변경했습니다.

으아악

출력에서 사용자는 10초의 슬라이드쇼를 볼 수 있습니다.

예

아래 예에서는 슬라이드쇼의 콘텐츠로 이미지를 추가합니다. 또한 이미지의 크기를 "요소" div의 전체 크기로 설정합니다. 으아악

출력에서 사용자는 이미지 슬라이드쇼를 관찰할 수 있습니다.

결론

사용자는 HTML과 CSS만 사용하여 슬라이드쇼를 만드는 방법을 배웠습니다. 그러나 슬라이드쇼를 만들려면 JavaScript를 사용하는 것이 더 유연하게 조작할 수 있으므로 권장됩니다. 예를 들어 슬라이드가 100개가 넘고 슬라이드쇼를 만들어야 하는 경우 슬라이드쇼에 애니메이션을 적용하려면 키프레임에 하드코딩된 백분율 값을 추가해야 하기 때문에 CSS 코드가 더 복잡해질 수 있습니다.

위 내용은 HTML과 CSS를 사용하여 슬라이드쇼 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!