1

我正在尝试找到一个过渡 CSS 代码来过渡两个图像。我希望第一张图像显示 4 秒钟，然后淡入第二张图像，该图像将在几秒钟内保持不变，然后淡入第一张。现在我没有使用 CSS，我发现大多数 CSS 教程都被格式化为 on :hoover。我希望我的图像不断变化而不需要 :hover 。

我现在使用的 flexi 广告编码是 ans 在 waterfox 和 explorer 中运行良好，但您可以看到在 chrome 中加载的图像闪烁不良。

这是我正在使用的示例。我现在使用的脚本实际上是在 30 幅图像中进行转换，我制作了一些从一张到另一张褪色的图像，这就是为什么它看起来会褪色的原因。我想要某种只需要 2 张图像并每 4 秒淡出一张到下一张的 CSS。

http://www.vulgarmediaproductions.com/walt/walt.shtml

4

2 回答 2

1

您需要为此使用关键帧动画- DEMO

HTML：

<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-45-a-web.jpg'>

CSS：

img {
    position: absolute;
    width : 320px;
    height: 180px;
}
img:last-child { animation: fader 4s infinite alternate; }
@keyframes fader { to { opacity: 0; } }

编辑

如果您的图像具有透明度，那么您需要为它们两个的不透明度设置动画，而不仅仅是顶部的那个。像这样 -演示

img {
    opacity: 0;
    position: absolute;
    width : 256px;
    height: 256px;
}
img:first-child { animation: fadein 8s infinite alternate; }
img:last-child { opacity: 1; animation: fadeout 8s infinite alternate; }
@keyframes fadein { 50% { opacity: 1; } }
@keyframes fadeout { 50% { opacity: 0; } }

另外，请记住，您必须使用前缀（我没有使用任何前缀，因为 dabblet 包含 -prefix-free 并且这样更容易突出这个想法）：

img:first-child {
    -webkit-animation: fadein 8s infinite alternate;  /* Chrome, Safari, Android, Blackberry */
    -moz-animation: fadein 8s infinite alternate; /* FF, FF for Android */
    -o-animation: fadein 8s infinite alternate; /* Opera 12 */
    animation: fadein 8s infinite alternate; /* IE 10, FF 16+, Opera 12.5 */
}
@-webkit-keyframes fadein { 50% { opacity: 1; } }
@-moz-keyframes fadein { 50% { opacity: 1; } }
@-o-keyframes fadein { 50% { opacity: 1; } }
@keyframes fadein { 50% { opacity: 1; } }
/* same for the other set (fadeout) */
于 2012-09-03T22:05:47.647 回答
0

未经测试，只是即时编写，但应该可以工作。如果您在让它工作时遇到任何问题，请告诉我...您可能想使用 FireBug for Firefox 进行调试。它可以帮助您大量使用 CSS、HTML 和 JavaScript。

CSS3：

.slideShow
{
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 200ms ease-in-out 0s;
-moz-transition: all 200ms ease-in-out 0s;
-ie-transition: all 200ms ease-in-out 0s;
-o-transition: all 200ms ease-in-out 0s;
transition: all 200ms ease-in-out 0s;
}
.slideShowWrapper { position:relative; }

HTML：

<div class="slideShowWrapper" id="mySlideShow" style="width:400px;height:300px;">
   <div class="slideShow" style="opacity:1.0"> (image 1 goes here) </div>
   <div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
   <div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
   <div class="slideShow" style="opacity:0.0"> (image N goes here) </div>
</div>

JS：

function ssCycle(_obj)
{
   var _oList=_obj.getElementsByTagName('div');
   for (var _trace=0;_trace<oList.length;_trace++)      
   {
      if(_oList[_trace].getAttribute('style').indexOf('opacity:1.0')>0)
      {
         _oList[_trace].style.opacity='0.0';
         try
         {
            _oList[(_trace+1)].style.opacity='1.0';
         }
         catch(_e)
         {
            _oList[0].style.opacity='1.0';
         }
      }
   }
};
(function(_src){ void(var tmrFunc = "void(ssCycle(document.getElementById("+_src+"));";setInterval(tmrFunc,4000);}).call('mySlideShow');
于 2012-09-03T21:45:42.827 回答