css 轮播图

2021-09-07 14:02:57 作者：互联网

<!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

标签：轮播,photo,height,width,400px,margin,css,left
来源： https://www.cnblogs.com/2008nmj/p/15237906.html