Pure CSS for carousel mapping

The implementation principle of the Carousel diagram is actually relatively simple.

As an example,

<div  class= "main" ><div class= "Div-main" ></div></div>

The width of main is 100px

The width of the div-main is 500px

We use JS control Div-main to the left or to the right to move, so that the implementation of the Carousel, simple

Okay, let's start with a CSS3 API.

Animation: myfirst 5s linear 2s infinite alternate ;

Myfirst: Animation name

5s: How often do animations finish

Linear: What curve does the animation perform

2s: How long does animation delay execute

Infinite: This parameter is the animation has been looping, can write numbers also line

Alternate: Only animations are performed upside down

First introduced here, complete usage can refer to: CSS3 Animation API Reference

The following code:

<! DOCTYPE html>
   #frame {position:absolute;width:302px;height:200px;overflow:hidden;border-radius:5px}    #dis {position: absolute;left:-50px;top:-10px;opacity:.5}    #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color: #fff; border-radius:10px;background: #000}    #photos. img{float:left; WIDTH:300PX;HEIGHT:200PX;BACKGROUND-COLOR:RED;BORDER-LEFT:1PX solid blue;}    #photos {  position:absolute;z-index:9;  Width:calc (301PX * 4);/*---Modify the number of pictures, you need to modify the following animation parameters */  }    . play{animation:ma 5s ease-out infinite Alternate;}    @keyframes Ma {        0%,25% {        margin-left:0px;       }        30%,50% {       margin-left: -300px;    }        55%,75% {       margin-left: -600px;    }        80%,100% {       margin-left: -900px;    }    }
What code is not as much as a running demo online
Pure CSS for carousel mapping