CSS3图像转换没有悬停

我想找到一个转换CSS代码来转换两个图像。我想让第一张图片显示4秒钟，然后淡入第二张图片，这张图片会保持不变，持续几秒钟，然后淡入第一张图片。现在我不使用CSS，并且我发现大多数CSS教程都是为hoover格式化的。我希望我的形象不断变化，而不需要：悬停在需要。CSS3图像转换没有悬停

我现在使用的flexi广告代码是一个ans在waterfox和explorer中可以正常工作，但是您可以看到图像以不良的闪烁在Chrome中加载。

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

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

来源

2012-09-03 user1513829

没有测试过，只是书面上的苍蝇，但应该工作。如果在启动时遇到任何问题，请告诉我... 您可能需要使用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-03 21:45:42

您需要使用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无我没有使用任何和它更容易凸显的想法，方式）：

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-03 22:05:47 Ana

我试过这种方法，它没有改变它只是一次加载两个图像... – user1513829

看到我的编辑。它有帮助吗？ – Ana

@Ana ..正常工作:-)谢谢 –

CSS3图像转换没有悬停

回答

相关问题