• 技术文章 >web前端 >css教程

    纯CSS如何实现图片轮播

    醉折花枝作酒筹醉折花枝作酒筹2021-04-02 14:42:02原创93

    在css中,可以使用animation属性和@keyframes规则来实现图片轮播效果。只需要先使用@keyframes创建动画;然后使用animation属性设置动画所需时间,速度以及次数等即可。

    本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

    首先准备相同大小的多个图片,将要展示图片横排放在一个图片容器里面。在图片容器外再加一个展示容器,展示容器大小为图片大小,给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值。

    动画效果分为切换和停留两部分,自定义动画阶段与图片数量相关,动画各阶段偏移值与图片大小相关。

    本文中示例的是有第一个图片切换到最后一张图片。

    HTML

    <body>
            <div id="container">
                <div id="photo">
                    <img src="images/1.jpg" />
                    <img src="images/2.jpg" />
                    <img src="images/3.jpg" />
                </div>
            </div>
        </body>

    解析:
    这里创建了三个 img 元素,img 元素外面是图片容器,图片容器外面是展示容器。

    CSS

    <style type="text/css">
                #container {
                    width: 400px;
                    overflow: hidden;
                }
                #photo {
                    width: 1200px;
                    animation: switch 5s ease-out infinite;
                }
                #photo > img {
                    float: left;
                    width: 400px;
                }
                @keyframes switch {
                    0%, 25% {
                        margin-left: 0;
                    }
                    35%, 60% {
                        margin-left: -400px;
                    }
                    70%, 100% {
                        margin-left: -800px;
                    }
                }
            </style>

    效果图:

    GIF.gif

    解析:

    推荐学习:《css视频教程

    以上就是纯CSS如何实现图片轮播的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css怎么实现内容不可选 下一篇:css怎么实现超出两行显示省略
    第15期线上培训班

    相关文章推荐

    • html轮播图如何实现• 利用CSS如何实现图片轮播效果?(代码示例)• css怎么设置元素一直旋转• 什么是css3• css文本怎么设置水平对齐• css怎么去掉a的下划线

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网