Question

<html>
   <head>
      <style>
         <!-- Need help in this css for transition of background-image -->
          body{
              -webkit-transition:background-image 5s ease-in-out;
              -moz-transition:background-image 5s ease-in-out;
              -o-transition:background-image 5s ease-in-out;
              -ms-transition:background-image 5s ease-in-out;
               transition:background-image 5s ease-in-out;
            }
      </style>
    </head>
 <body>
</body>
</html>

need a background-image transition like flash

需要闪光背景图像效果

我也试过这个

   $('body').
        animate({ opacity: 0 }, 
                   'slow', 
                    function () {
                        $(this).css(
                           { 'background-image': 
                             'url(\''+jdata.imageurl+  '\')'    }).animate({ opacity: 1 });
                     });

Answer 1

转换背景图像是不可能的，转换只能转换那些具有隐式或显式数字比例的属性;例如width，height，opacity等属性。

这与无法转换到display: none或从background-image-position过渡的原因相同，因为有两种状态（可见和不可见），两者之间没有可能的中间步骤。

如果要在一个背景图像和另一个背景图像之间进行转换，则需要在同一空间中堆叠多个元素，然后使用CSS过渡或动画淡化包含该背景图像的元素。

您也可以转换example属性以获得轮播的印象，例如，因为此属性使用CSS长度单位，当然可以顺利过渡。

什么应该在css3过渡

1 个答案: