Question

我正在尝试使用CSS做一个简单的幻灯片，这可以很好地跨浏览器。这是我尝试过的，它适用于所有浏览器。它基本上取自W3schools网站：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 1000px;
    height: 600px;
    background: red;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {background: yellow;}
    25%  {background: green;}
    50%  {background: pink;}
    75%  {background: orange;}
    100% {background: blue;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {background: yellow;}
    25%  {background: green;}
    50%  {background: pink;}
    75%  {background: orange;}
    100% {background: blue;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

这可以很好地跨浏览器。但是，一旦我尝试将动画更改为“旋转”背景图像，它就可以在chrome中运行，但它在FireFox中不起作用

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {background-image: url(slideshow/01.jpg);}
    25%  {background-image: url(slideshow/02.jpg);}
    50%  {background-image: url(slideshow/03.jpg);}
    75%  {background-image: url(slideshow/04.jpg);}
    100% {background-image: url(slideshow/05.jpg);}
}

/* Standard syntax */
@keyframes mymove {
    0%   {background-image: url(slideshow/01.jpg);}
    25%  {background-image: url(slideshow/02.jpg);}
    50%  {background-image: url(slideshow/03.jpg);}
    75%  {background-image: url(slideshow/04.jpg);}
    100% {background-image: url(slideshow/05.jpg);}
}

幻灯片FireFox

0 个答案: