CSS로 슬라이드 효과를 얻는 방법

구현 방법: 먼저 여러 슬라이드 요소를 정의한 다음 "@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 중국어 웹사이트의 기타 관련 기사를 참조하세요!