纯CSS实现轮播图

最新推荐文章于 2021-07-03 13:27:31 发布

renlzrz

最新推荐文章于 2021-07-03 13:27:31 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/renlzrz/article/details/89339562

版权

1.外面一个容器盒子，宽度是展示的宽度
2.中间放存放图片的盒子，宽度是图片宽度
3.最里面放需要的图片
4.在存放盒子层用animation属性

<style>
    #container {
        width: 300px;
        height: 100px;
        overflow: hidden;
    }
    #photo {
        width: 900px;
        animation: switch 5s ease-out infinite;
    }

    #photo > img {
        float: left;
        width: 300px;
        height: 100px;
    }
    //设定动画的快慢
    @keyframes switch {
        0%, 25% {
            margin-left: 0;
        }
        35%, 60% {
            margin-left: -300px;
        }
        70%, 100% {
            margin-left: -600px;
        }
    }
</style>

<body>
<div id="container">
    <div id="photo">
        <a href=""><img src="QQ截图20190416161521 - 副本 (2).jpg" /></a>
        <img src="QQ截图20190416161521 - 副本.jpg" />
        <img src="QQ截图20190416161521.jpg" />
    </div>
</div>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

renlzrz

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现轮播图

1.外面一个容器盒子，宽度是展示的宽度2.中间放存放图片的盒子，宽度是图片宽度3.最里面放需要的图片4.在存放盒子层用animation属性<style> #container { width: 300px; height: 100px; overflow: hidden; } #photo { ...
复制链接

扫一扫