代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播</title><style>.boss {position: relative;width: 200px;height: 200px;overflow: hidden;}.boss>div {width: 10000px;height: 200px;border: 1px solid #000;}.box {display: flex;position: absolute;top: 0;left: 0;}.box>div {width: 200px;height: 200px;animation: move 10s infinite ease-out;}/* 关键帧 平移即可 */@keyframes move {0% {transform: translateX(0%);}25% {transform: translateX(-100%);}50% {transform: translateX(-200%);}75% {transform: translateX(-300%);}100% {transform: translateX(-400%);}}</style>
</head>
<body><div class="boss"><div class="box"><!-- 第一个背景颜色是pink 最后一个也是pink色 --><div style="background-color: red;"></div><div style="background-color: yellow;"></div><div style="background-color: blue;"></div><div style="background-color: green;"></div><div style="background-color: red;"></div></div></div>
</body>
</html>
样式:
css3轮播样式
上面代码中的：animation: move 10s infinite ease-out;
10s是轮播所用时间。
