CSS3에서 회전식 차트를 구현하는 방법은 무엇입니까? CSS3에서 캐러셀 이미지를 구현하는 방법

웹페이지에서 많은 사진이 앞뒤로 바뀌는 위치를 자주 볼 수 있습니다. 이것이 바로 캐러셀 이미지의 등장으로 중요한 정보를 한 위치에 표시할 수 있게 된 것입니다. 이것이 어떻게 달성됩니까? 캐러셀 차트는 js나 css로 구현할 수 있습니다. 이 글에서는 CSS3로 캐러셀 차트 효과를 구현하는 방법을 소개하겠습니다.

css3은 CSS3 애니메이션 속성과 @keyframes 규칙을 사용하여 캐러셀 효과를 얻을 수 있습니다.

aiimation은 주로 애니메이션 효과를 얻기 위한 두 부분으로 구성됩니다.
1. Flash 애니메이션과 유사한 프레임을 통해 애니메이션을 선언합니다.
2. .

animation 속성은 약식 속성입니다(권장 동영상 강좌: css tutorial)

구문: animation: 이름 기간 타이밍-함수 지연 반복- 카운트 방향.

animation 속성 값은 여기에 소개되지 않습니다. 필요한 경우 css 매뉴얼을 참조할 수 있습니다.

그럼 직접 예를 살펴보겠습니다.

html：

<div id="container">
    <div id="photo">
        <img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" />
        <img src="http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg" />
        <img src="http://img.zcool.cn/community/01c60259ac0f91a801211d25904e1f.jpg@1280w_1l_2o_100sh.jpg" />
    </div>
</div>

css：#🎜🎜 #

#container {
    width: 400px;
    height: 300px;
    overflow: hidden;
}
#photo {
    width: 1200px;
    animation: switch 5s ease-out infinite;
}
#photo > img {
    float: left;
    width: 400px;
    height: 300px;
}
@keyframes switch {
    0%, 25% {
        margin-left: 0;
    }
    35%, 60% {
        margin-left: -400px;
    }
    70%, 100% {
        margin-left: -800px;
    }
}

설명:

디스플레이 컨테이너의 크기는 사진의 크기와 동일합니다.

사진에 플로트 효과 추가, 번거로운 여백 문제를 고려할 필요가 없습니다

예제에는 3개의 이미지만 있으므로 각 단계는 증가하는 여백 왼쪽 값을 설정하여 전환 효과를 얻습니다.

# 🎜🎜#설정된 애니메이션 단계(예: 35%~60%)는 애니메이션 체류 부분이고, 이전 단계의 자유 시간(예: 25%~35%)은 애니메이션 전환 부분입니다. 부분은 스스로 제어해야합니다.

이 글에서는 CSS 캐러셀 효과 구현에 대해 간략하게 소개합니다. CSS 캐러셀 효과에 대한 자세한 내용은 PHP 중국어 웹사이트 #🎜에서

특수 효과 다운로드를 확인하세요. 🎜#.

관련 권장 사항:

CSS3 간단한 캐러셀 구현

Bootstrap 구현 이미지 캐러셀 기능#

jQuery 이미지 캐러셀 슬라이드쇼 효과 구현

위 내용은 CSS3에서 회전식 차트를 구현하는 방법은 무엇입니까? CSS3에서 캐러셀 이미지를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!