css 轮播图

田田 • • web开发技术 • 245 阅读 
<!DOCTYPE html>
<html>
<head>
<title>Slide Image Sample</title>
<style>
#container {
width: 400px;
height: 300px;
overflow: hidden;
}
#photo {
width: 1200px;
animation: switch 5s ease-out infinite;
}
#photo > img {
float: left;
width: 400px;
height: 300px;
}
@keyframes switch {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -400px;
}
70%, 100% {
margin-left: -800px;
}
}
</style>
</head>
<body>
<div id="container">
<div id="photo">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
</div>
</body>
</html>

转自：https://blog.csdn.net/u011848617/article/details/80468463

css 轮播图

原文：https://www.cnblogs.com/2008nmj/p/15237906.html

以上是css 轮播图的全部内容。
THE END
分享
二维码
)">
< <上一篇
下一篇>>