选中input的时候为什么要把div的图片换掉？

就是下面这句，为什么要换掉背景图片？这样的话，把图片偏出的时间改成0.5S，偏入的时间改成5S。会看到下面已经有换好的图片了呀？

.cr-container input.cr-selector-img-1:checked~.cr-bgimg,
.cr-bgimg div span:nth-child(1) {
    background: url(../images/1.jpg);
}

还有就是，为什么我把偏入偏出的时间全部改成5S，进入页面的前5秒，不会出现动画效果，过了5S才会出现呢？

疯狂机械人偶 2017-08-16

源自：CSS3图片切换特效 3-11 animation实现当前图片飘出动画

收起

2回答

卡布琦诺 2017-08-17 11:25:59

建议前仔细观看一下课程是视频，在视频中老师讲解的很详细，而且，建议遇到问题的时候，首先要有一个自己的思考过程，要慢慢的学会如何自主解决问题，这样即使是在后期的工作中遇到问题，自己也能独立解决，当前就目前来说，有问题还是可以在问答区进行提问哒，先去仔细观看一下视频，如果还是不懂，欢迎再来提问哦，祝学习愉快！

收起回答

提问者疯狂机械人偶 #1

建议仔细看一下我的问题。我不是问的飘入飘出的问题。我是问的为什么要在选中input的时候把cr-bgimg的背景换掉。也就是说为什么要设置.cr-container input.cr-selector-img-1:checked~.cr-bgimg这个元素的背景图片这一步在我看来完全多余，删掉一样不会影响效果。但是飘出时间保持不变。调慢飘入时间的时候会看到背景图已经换成了选中的那张图片。

2017-08-17 23:23:31
提问者疯狂机械人偶 #2

删掉不会影响效果，但是不删掉的时候调慢飘入时间会看到背景图片已经提前改变，然后才看到左侧的元素位移进来。

2017-08-17 23:26:03

提问者疯狂机械人偶 2017-08-16 22:25:17

完整CSS代码如下

.cr-bgimg div span {
    width: 100%;
    height: 100%;
    position: absolute;
    left: -150px;
    top: 0;
    z-index: 2;
    text-indent: -9999px;
    background-repeat: no-repeat;
    transition: left 5s ease-in-out;
}

.cr-container input.cr-selector-img-1:checked~.cr-bgimg,
.cr-bgimg div span:nth-child(1) {
    background: url(../images/1.jpg);
}

.cr-container input.cr-selector-img-2:checked~.cr-bgimg,
.cr-bgimg div span:nth-child(2) {
    background: url(../images/2.jpg);
}

.cr-container input.cr-selector-img-3:checked~.cr-bgimg,
.cr-bgimg div span:nth-child(3) {
    background: url(../images/3.jpg);
}

.cr-container input.cr-selector-img-4:checked~.cr-bgimg,
.cr-bgimg div span:nth-child(4) {
    background: url(../images/4.jpg);
}

.cr-bgimg div:nth-child(1) span {
    background-position: 0 0;
}

.cr-bgimg div:nth-child(2) span {
    background-position: -150px 0;
}

.cr-bgimg div:nth-child(3) span {
    background-position: -300px 0;
}

.cr-bgimg div:nth-child(4) span {
    background-position: -450px 0;
}


.cr-container input:checked~.cr-bgimg div span {
    animation: slideOut .5s ease-in-out;
}

@keyframes slideOut {
    from {
        left: 0;
    }
    to {
        left: 150px;
    }
}


.cr-container input.cr-selector-img-1:checked~.cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked~.cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked~.cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked~.cr-bgimg div span:nth-child(4) {
    z-index: 10;
    left: 0;
    animation: none;
}

收起回答