Question

我有这个代码用于创建滑块图像，但由于某种原因它不能同时在Chrome和FF上工作，我已经设法让它一次只能工作一个，但不是两个都... 这是代码： //适用于FF atm //

@-webkit-keyframes slidy {
            0% { left: 0%; }
            20% { left: 0%; }
            25% { left: -100%; }
            45% { left: -100%; }
            50% { left: -200%; }
            70% { left: -200%; }
            75% { left: -300%; }
            95% { left: -300%; }
            100% { left: -400%; }
        }
        @-moz-keyframes slidy {
            0% { left: 0%; }
            20% { left: 0%; }
            25% { left: -100%; }
            45% { left: -100%; }
            50% { left: -200%; }
            70% { left: -200%; }
            75% { left: -300%; }
            95% { left: -300%; }
            100% { left: -400%; }
        }
        @-o-keyframes slidy {
            0% { left: 0%; }
            20% { left: 0%; }
            25% { left: -100%; }
            45% { left: -100%; }
            50% { left: -200%; }
            70% { left: -200%; }
            75% { left: -300%; }
            95% { left: -300%; }
            100% { left: -400%; }
        }
        @keyframes slidy {
            0% { left: 0%; }
            20% { left: 0%; }
            25% { left: -100%; }
            45% { left: -100%; }
            50% { left: -200%; }
            70% { left: -200%; }
            75% { left: -300%; }
            95% { left: -300%; }
            100% { left: -400%; }
        }div#slider{
        overflow: hidden;
    }
    div#slider figure img{
        width: 20%;
        float: left;
    }
    div#slider figure{
        position: relative;
        width: 500%;
        margin: 0;
        left:0;
        font-size: 0;
        -webkit-animation: slidy 5s infinite; /* Safari 4+ */
        -moz-animation:    slidy 5s infinite; /* Fx 5+ */
        -o-animation:      slidy 5s infinite; /* Opera 12+ */
        animation:         slidy 5s infinite; /* IE 10+ */
    }

和html：

<div id="slider">
    <figure>
        <img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto1.png" >
        <img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto2.png" >
        <img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto3.png" >
        <img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto4.png" >
        <img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto5.png" >
    </figure>
</div>

谢谢！

Answer 1

请参考这个JSFiddle代码，我已经检查了ipad2，ipad mini和ipad air，也在Android手机上的chrome上

<div id="slider">
    <figure>
        <img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
        <img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
        <img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
        <img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
        <img alt="" src="https://www.google.co.in/images/srpr/logo11w.png" >
    </figure>
</div>

我认为你应该交叉检查你上传的照片，如果它们可以正常使用的话。

<img alt="" src="<?php bloginfo('template_url'); ?>/img/headerPhoto1.png" >

如果您有任何疑问，请修改jsfiddle，然后重新发送链接。

问候D.

CSS @keyframes不能跨浏览器工作

1 个答案: