구현 방법: 먼저 여러 슬라이드 요소를 정의한 다음 "@keyframes" 규칙과 애니메이션 속성을 사용하여 애니메이션을 정의한 다음 마지막으로 키프레임에서 "transform:translateX()"를 사용합니다. 스타일은 전환 효과를 구현합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
transfrom 속성을 통한 2D 변환
html 코드:
<section id=box> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>1</li> </ul> </section>
css 코드:
<style> * { margin: 0; padding: 0; font-family: 微软雅黑; list-style: none; } #box{ width:400px; height:200px; border: 1px solid #000; margin: 50px auto; overflow: hidden; } ul{ width: 2000px; animation: dh 10s infinite ease; } ul li{ width:400px; height:200px; float: left; } ul li:nth-child(1){ background:#4b86db; } ul li:nth-child(2){ background:#ff9999; } ul li:nth-child(3){ background:olivedrab; } ul li:nth-child(4){ background:skyblue; } ul li:nth-child(5){ background:#4b86db; } @keyframes dh { 0%{transform: translateX(0)} 25%{transform: translateX(-400px)} 50%{transform: translateX(-800px)} 75%{transform: translateX(-1200px)} 100%{transform: translateX(-1600px)} } </style>
추천 학습: css 비디오 튜토리얼
위 내용은 CSS로 슬라이드 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!