HTML5+CSS3实现轮播图

时间：2025-03-18 08:00:29

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;
        }
        {
            width: 2000px;
            height: 200px;
            background-color: red;
            
            animation-name: move;
            animation-duration: 10s;
            animation-timing-function: steps(5);
            animation-iteration-count: infinite;
        }
         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 >
        <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>

相关文章