怎么用css简单代码设置轮播,用CSS代码编写简易轮播图

废话不多说，直接上代码

.container{

width: 1000px;

height: 500px;

margin: 50px auto;

overflow: hidden;

background: skyblue;

}

.flex{

display: flex;

}

.item-box{

animation: my-css 5s infinite;

-webkit-animation: my-css 5s infinite;

-o-animation: my-css 5s infinite;

-moz-animation: my-css 5s infinite;

animation-direction: alternate;

-webkit-animation-direction: alternate;

-o-animation-direction: alternate;

-moz-animation-direction: alternate;

}

.item-box:hover{

animation-play-state: paused;

-webkit-animation-play-state: paused;

-o-animation-play-state: paused;

-moz-animation-play-state: paused;

}

.item-box div{

width: 1000px;

height: 450px;

flex-shrink: 0;

}

.item1{

background: pink;

}

.item2{

background: brown;

}

.item3{

background: red;

}

.item4{

background: yellow;

}

.item5{

background: green;

}

@keyframes my-css{

0% {

transform: translate(0%);

}

25% {

transform: translate(-100%);

}

50% {

transform: translate(-200%);

}

75% {

transform: translate(-300%);

}

100% {

transform: translate(-400%);

}

}

@-webkit-keyframes my-css{

0% {

transform: translate(0%);

}

25% {

transform: translate(-100%);

}

50% {

transform: translate(-200%);

}

75% {

transform: translate(-300%);

}

100% {

transform: translate(-400%);

}

}

@-o-keyframes my-css{

0% {

transform: translate(0%);

}

25% {

transform: translate(-100%);

}

50% {

transform: translate(-200%);

}

75% {

transform: translate(-300%);

}

100% {

transform: translate(-400%);

}

}

@-moz-keyframes my-css{

0% {

transform: translate(0%);

}

25% {

transform: translate(-100%);

}

50% {

transform: translate(-200%);

}

75% {

transform: translate(-300%);

}

100% {

transform: translate(-400%);

}

}

.ico-box{

width: 30%;

height: 30px;

justify-content: space-around;

align-items: center;

margin: 10px auto;

}

.ico-box div{

height: 10px;

width: 20px;

border-radius: 10px;

background: #fff;

transition: width 0.5s;

}

.ico-box div:hover{

width: 40px;

background: pink;

}

原文出处：https://www.cnblogs.com/tourey-fatty/p/12094343.html