css3轮播显示,纯CSS3移动循环轮播

Title

@keyframes slider {

0%{transform: translateX(0px);}

1%,25%{transform: translateX(-200px);}

26%,50%{transform: translateX(-400px);}

51%,75%{transform: translateX(-600px);}

76%,100%{transform: translateX(-800px);}

}

.container{width: 200px; height: 200px; overflow: hidden;}

.itemList{width: 9999px; margin: 0; padding: 0; border: 0; position: relative; font-size: 0;}

.itemListSlider{left: 0; animation: slider 8s linear infinite;}

.item{width: 200px; height: 200px; margin: 0; padding: 0; border: 0; display: inline-block;

font-size: 120px;

text-align:center

line-height: 200px;

}

.item1{background-color: red;}

.item2{background-color: blue;}

.item3{background-color: yellow;}

.item4{background-color: green;}

• 4
• 1
• 2
• 3
• 4