Question

我想通过使用css动画和jquery作为后备来创建一个简单的淡入/淡出幻灯片。我在动画中添加了缩放css变换，因此幻灯片将慢慢放大，直到被下一张幻灯片替换

这是HTML

<ul class="fadein">
  <li style="background-image:url('http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg');"></li>
  <li style="background-image:url('http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg');"></li>
  <li style="background-image:url('http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg');"></li>
</ul>

这是css

ul.fadein { display:block;position:relative; width:100%; height:100%; }
ul.fadein li { display:block; position:fixed; left:0; top:0; width:100%; height:100%; background-size: cover;
-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
    0% {

        -webkit-animation-timing-function: ease-in;
    }
    8% {

        -webkit-transform: scale(1.05);
        -webkit-animation-timing-function: ease-out;
    }
    17% {

        -webkit-transform: scale(1.1);
    }
    25% {

        -webkit-transform: scale(1.1);
    }
    100% {  }
}
@-moz-keyframes imageAnimation {
    0% {

        -moz-animation-timing-function: ease-in;
    }
    8% {

        -moz-transform: scale(1.05);
        -moz-animation-timing-function: ease-out;
    }
    17% {

        -moz-transform: scale(1.1);
    }
    25% {

        -moz-transform: scale(1.1);
    }
    100% {  }
}
@-o-keyframes imageAnimation {
    0% {

        -o-animation-timing-function: ease-in;
    }
    8% {

        -o-transform: scale(1.05);
        -o-animation-timing-function: ease-out;
    }
    17% {

        -o-transform: scale(1.1);
    }
    25% {

        -o-transform: scale(1.1);
    }
    100% {  }
}
@-ms-keyframes imageAnimation {
    0% {

        -ms-animation-timing-function: ease-in;
    }
    8% {

        -ms-transform: scale(1.05);
        -ms-animation-timing-function: ease-out;
    }
    17% {

        -ms-transform: scale(1.1);
    }
    25% {

        -ms-transform: scale(1.1);
    }
    100% {  }
}
@keyframes imageAnimation {
    0% {

        animation-timing-function: ease-in;
    }
    8% {

        transform: scale(1.05);
        animation-timing-function: ease-out;
    }
    17% {

        transform: scale(1.1);
    }
    25% {

        transform: scale(1.1);
    }
    100% {  }
}

这是javascript

jQuery(function(){
    jQuery('ul.fadein li:gt(0)').hide();
    setInterval(function(){
        jQuery('ul.fadein :first-child').fadeOut()
            .next('li').fadeIn()
            .end().appendTo('ul.fadein');
        },
      5000);
});

除非幻灯片背景尺寸在淡出之前恢复到原始大小，否则效果很好，因此转换看起来不太好。我已将脚本放在http://jsfiddle.net/kzc6sp08/

中

任何人都可以帮助我吗？感谢

使用jQuery和css3进行简单的幻灯片演示

0 个答案: