css如何设置左右自动播放

CSS如何设置左右自动播放？

在Web设计中，自动播放被广泛用于轮播、广告和视频等等。

CSS实现左右自动播放需要使用动画属性和@keyframes关键字。以下是样例代码：

    .slider {
        width: 100%;
        height: 450px;
        overflow: hidden;
        position: relative;
    }

    .slider img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        animation: slide 5s linear infinite;
        -webkit-animation: slide 5s linear infinite;
    }

    .slider img:nth-child(1) {
        opacity: 1;
    }

    @keyframes slide {
        0% {
            opacity: 0;
            left: 0;
        }
        10% {
            opacity: 1;
            left: 0;
        }
        20% {
            opacity: 0;
            left: -100%;
        }
        30% {
            opacity: 1;
            left: 100%;
        }
        40% {
            opacity: 0;
            left: 0%;
        }
        100% {
            opacity: 0;
            left: 0%;
        }
    }

    @-webkit-keyframes slide {
        0% {
            opacity: 0;
            left: 0;
        }
        10% {
            opacity: 1;
            left: 0;
        }
        20% {
            opacity: 0;
            left: -100%;
        }
        30% {
            opacity: 1;
            left: 100%;
        }
        40% {
            opacity: 0;
            left: 0%;
        }
        100% {
            opacity: 0;
            left: 0%;
        }
    }

以上代码中，"slider"是容器的类名，"img"是图片的标签名。将"slider"设置为相对定位，"img"设置为绝对定位。使用animation属性和@keyframes关键字使第一张图片状态为显示，其余图片状态为隐藏。使用left属性实现左右播放效果。

细心的读者会发现代码中还有"-webkit-"前缀的动画，这也是为了兼容Safari和Chrome浏览器。

设置播放速度和播放次数只需要更改animation属性中的参数即可。例如：animation: slide 5s linear 3;

以上就是CSS如何设置左右自动播放的方法，希望可以对大家有所帮助。