纯css实现轮播图效果

css3实现轮播图原理

都知道轮播图肯定是要动起来的，这里我们用到了css3的动画，实现原理也是很简单的
下面给大家上代码

div {
            width: 500px;
            height: 300px;
            /* 背景图片理论上来说是可以无限张的，这里咱们就用多个图片拼接 */
            background-image: url(img/cp.jpg), url(img/cp1.jpg), url(img/cp2.jpg), url(img/cp3.jpg), url(img/cp4.jpg), url(img/cp5.jpg), url(img/cp6.jpg), url(img/cp.jpg);
            background-size: 500px 300px;
            background-repeat: no-repeat;
            /* 因为定义多张背景图片，第一张会覆盖在后面的图片上面，这里给每张图片定位，让后一张图片接在上一张后面 */
            background-position-x: 0, 500px, 1000px, 1500px, 2000px, 2500px, 3000px, 3500px;
            animation: yy 14s linear infinite;
        }
        
@keyframes yy {
            from {
                background-position-x: 0, 500px, 1000px, 1500px, 2000px, 2500px, 3000px, 3500px;
            }
            /* 这里我就只演示一个效果了，需要玩点花的可以自己加 */
            to {
                background-position: -3500px, -3000px 0, -2500px 0, -2000px 0, -1500px 0, -1000px 0, -500px 0, 0 0;
            }
        }

这里的重点是最后一张图片轮播完了之后会跳转第一张，衔接有点问题，把第一张图片添加在最后一张图片后面就可以完美实现了！！！