HTML5+CSS3实现轮播图

最新推荐文章于 2024-05-28 19:26:08 发布

置顶 lse717

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量6.9k

点赞数 9

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44880730/article/details/107866535

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5+CSS3来实现轮播图
利用CSS3的新属性Animation，主要是利用CSS3的动画的特性，不需要任何JS技术即可实现轮播图：

下面就是我实现轮播图的步骤
（1）、先用@keyframes创建一个动画

@keyframes identifier {
        from{
              /*初始状态*/
        }to{
             /*结束状态*/
        }
    }

（2）、通过animation 来配置动画效果

animation-name: move;            //需要执行那个动画名move
animation-duration: 30s;             //动画执行的时间为30s
animation-iteration-count: infinite;  //动画迭代次数为无限循环 infinite
animation-timing-function: steps(5);   //动画分5步完成（5张图片）

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div#outer{
            width: 400px;
            height: 200px;
            border: 1px solid red;
            margin:0 auto;
            overflow: hidden;
        }
        div.move{
            width: 2000px;
            height: 200px;
            background-color: red;
            
            animation-name: move;
            animation-duration: 10s;
            animation-timing-function: steps(5);
            animation-iteration-count: infinite;
        }
        div.move div{
            width: 400px;
            height: 200px;
            float: left;
            color: #fff;
            font-size: 30px;
        }

        @keyframes move{
            from{
                margin-left: 0px;
            }
            to{
                margin-left: -2000px;
            }
        }
    </style>
</head>
<body>
    <div id="outer">
        <div class="move">
            <div style="background-color: red;">div1</div>
            <div style="background-color: blue;">div2</div>
            <div style="background-color: green;">div3</div>
            <div style="background-color: pink;">div4</div>
            <div style="background-color: purple;">div5</div>
        </div>
    </div>
</body>
</html>

lse717

关注

9
点赞
踩
52

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3实现轮播图

HTML+CSS写轮播图利用CSS3的新属性，可以实现轮播，主要是利用CSS3的动画的三要素：（1）、先创建一个名称叫什么的动画<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document<
复制链接

扫一扫