Question

我有大约10张图片，其中下一张图片与之前相同，但附加了一个元素。图像是花，第一个没有花瓣，下一个有一个，然后是两个，然后是三个。我试图在图像淡入时动画图像，以创建幻象，好像只有新花瓣渐渐消失。这是我的代码。

<!DOCTYPE html>
<html>
   <head>
      <title>change picture</title>
      <style type="text/css">
        #animation img {
            display: none;
            -moz-animation-delay: 3.5s;
             -webkit-animation-delay: 3.5s;
             -o-animation-delay: 3.5s;
              animation-delay: 3.5s;
        }
        #animation img:first-child {
            display: block;
            -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
        }
      </style>


      <script type = "text/javascript">
        function startAnimation() { 
            var frames = document.getElementById("animation").children;
            var frameCount = frames.length;
            var i = 0;
            setInterval(function () { 
                frames[i % frameCount].style.display = "none";
                frames[++i % frameCount].style.display = "block";
            }, 3000);
        }
      </script>
   </head>

   <body onload="startAnimation()">
      <div id="animation">
        <img src="logo0.png" alt="My image" />
        <img src="logo1.png" alt="My image" /> 
        <img src="logo2.png" alt="My image" /> 
        <img src="logo3.png" alt="My image" /> 
        <img src="logo4.png" alt="My image" /> 
        <img src="logo5.png" alt="My image" /> 
        <img src="logo6.png" alt="My image" /> 
        <img src="logo7.png" alt="My image" /> 
        <img src="logo8.png" alt="My image" /> 
        <img src="logo9.png" alt="My image" /> 
        <img src="logo10.png" alt="My image" /> 
        <img src="logo_end.png" alt="My image" /> 
      </div>
   </body>
</html>

动画PNG图像从显示无阻止

0 个答案: