Question

我正在尝试找到转换两个图像的过渡CSS代码。我希望第一个图像显示4秒然后淡入第二个图像，这个图像将保持相同的秒数然后淡出回到第一个图像。现在我没有使用CSS，我发现大多数CSS教程的格式都是on：hoover。我希望我的图像能够在不需要的情况下不断变换：需要悬停。

我现在使用的flexi广告编码是一个在waterfox和资源管理器中工作得很好但你可以看到图像被加载在chrome中，闪烁不好。

以下是我正在使用的示例。我现在使用的脚本实际上正在转换30个图像，我做了一些从一个到另一个淡入淡出的图像，这就是为什么它看起来会消失。我想要一些只需要2张图片的CSS，并且每隔4秒就会淡化一张。

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

Answer 1

您需要使用keyframe animations - 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; } }

修改

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

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) */

Answer 2

未经测试，只是即时编写，但应该可以正常工作。如果您在使用它时遇到任何问题，请告诉我...... 您可能希望使用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');

没有悬停的CSS3图像过渡

2 个答案: