CSS3는 캐러셀 효과를 구현합니다.

캐러셀 이미지의 CSS3 구현은 주로 css: background-position 및 css3: animation으로 구현됩니다. 그리고 이 캐러셀을 구현하려면 네 장의 그림이 가로로 연결된 그림이 필요합니다.

참고(Internet Explorer 10, Firefox 및 Opera는 animation 속성을 지원합니다. Safari 및 Chrome은 대체 -webkit-animation 속성을 지원합니다.)

HTML:

 <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="slide-box"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

CSS:

<span style="color: #800000;"><style>
    @-webkit-keyframes slide </span>{<span style="color: #ff0000;">
        0% {
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
        10%, 25% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
        }<span style="color: #800000;">
        35%, 50% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
        }<span style="color: #800000;">
        60%, 75% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
        }<span style="color: #800000;">
        85%, 100% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
    }
    @-moz-keyframes slide </span>{<span style="color: #ff0000;">
        0% {
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
        10%, 25% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
        }<span style="color: #800000;">
        35%, 50% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
        }<span style="color: #800000;">
        60%, 75% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
        }<span style="color: #800000;">
        85%, 100% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
    }
    @-o-keyframes slide </span>{<span style="color: #ff0000;">
        0% {
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
        10%, 25% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
        }<span style="color: #800000;">
        35%, 50% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
        }<span style="color: #800000;">
        60%, 75% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
        }<span style="color: #800000;">
        85%, 100% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
    }
    @keyframes slide </span>{<span style="color: #ff0000;">
        0% {
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
        10%, 25% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
        }<span style="color: #800000;">
        35%, 50% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
        }<span style="color: #800000;">
        60%, 75% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
        }<span style="color: #800000;">
        85%, 100% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
    }
    .slide-box </span>{<span style="color: #ff0000;">
        margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;<span style="color: #ff0000;">
        background</span>:<span style="color: #0000ff;"> url(http://sandbox.runjs.cn/uploads/rs/376/uazzmdfd/bg.png) 0 0 no-repeat</span>;<span style="color: #ff0000;">
        -webkit-animation</span>:<span style="color: #0000ff;"> slide 8s linear infinite</span>;<span style="color: #ff0000;">
        -o-animation</span>:<span style="color: #0000ff;"> slide 8s linear infinite</span>;<span style="color: #ff0000;">
        animation</span>:<span style="color: #0000ff;"> slide 8s linear infinite</span>;
    }<span style="color: #800000;">
</style></span>

animation 속성은 단축 속성인 JavaScript 구문입니다: object.style.animation=" 슬라이드 8s 선형 무한", 해당 매개변수는 다음과 같습니다.

animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

애니메이션 이름

선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다. . 애니메이션 지속 시간 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.

애니메이션 타이밍 기능

애니메이션의 속도 곡선을 지정합니다.

애니메이션 지연

애니메이션이 시작되기 전의 지연 시간을 지정합니다. 애니메이션 반복 횟수 애니메이션이 재생되어야 하는 횟수를 지정합니다. 애니메이션 방향 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다. 이미지를 8초 이내에 이동하도록 하고, 매번 왼쪽으로 600px씩 이동한 후 최종적으로 원래 지점으로 돌아옵니다. div의 너비는 600px로 이미지 하나를 수용할 수 있을 만큼 충분하므로 회전식 효과가 형성됩니다.