以下是css3最简单的轮播图实现
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0%;
margin: 0%
}
.element {
width: 400px;
height: 300px;
<!-- 溢出隐藏 -->
overflow: hidden;
}
.photo {
width: 1200px;
<!-- 更改该数值可以使图片移动速度变快 -->
animation: move 5s ease-out infinite;
}
img {
<!-- 浮动保证图片在同一行 -->
float: left;
width: 400px;
height: 300px;
}
@keyframes move {
0%,40% {
margin-left: 0;
}
40%,60% {
margin-left: -400px;
}
60%,100% {
margin-left: -800px;
}
}
</style>
</head>
<body>
<div class="element">
<div class="photo">
<img src="./1.png" />
<img src="./2.png" />
<img src="./3.png" />
</div>
</div>
</body>
</html>
1853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
