全屏图片轮播图案例代码

图片轮播图案例代码:

HTML代码:

<div class="box"><div class="big">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div></div>

CSS代码:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 300px;
            border: 2px solid blue;

            overflow: hidden;/*溢出隐藏*/

        }
        .big{
            width: 500%;
            height: 300px;
            border: 1px solid orange;

            animation: move 5s infinite alternate steps(5);

        }
        .big p{
            width: 20%;
            height: 300px;
            background-color: deepskyblue;
            font-size: 60px;
            color: white;
            float: left;
            text-align: center;
            line-height: 300px;

        }
        @keyframes move {
            from{
                margin-left: 0px;
            }

            to{
                margin-left: -500%;
            }

        }
    </style>