웹페이지에서 많은 사진이 앞뒤로 바뀌는 위치를 자주 볼 수 있습니다. 이것이 바로 캐러셀 이미지의 등장으로 중요한 정보를 한 위치에 표시할 수 있게 된 것입니다. 이것이 어떻게 달성됩니까? 캐러셀 차트는 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 간단한 캐러셀 구현
위 내용은 CSS3에서 회전식 차트를 구현하는 방법은 무엇입니까? CSS3에서 캐러셀 이미지를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!