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圖像轉換沒有懸停

回答

相關問題