我可以用CSS重啓一個gif（沒有JS）嗎？

所以我有這樣一段CSS的：我可以用CSS重啓一個gif（沒有JS）嗎？

.three-image-widget div.hover-icon img.original { display: block; } 
.three-image-widget div.hover-icon img.hovered { display: none; } 
.three-image-widget div.hover-icon:hover img.original { display: none; } 
.three-image-widget div.hover-icon:hover img.hovered { display: block; }

我.original圖像作爲.png S和.hovered圖像動畫.gif s表示我要開始，將鼠標懸停在div.hover-icon元素時。我知道這是可以做到這一點的JavaScript黑客這樣做：

$('div.hover-icon').hover(function(){ 
    $(this).find('.original').hide(); 
    var hov = $(this).find('.hovered'), 
     copy = hov.attr('src'); 
     hov.attr('src','').attr('src',copy); 
});

但我可以做純CSS的等價物嗎？

來源

2016-04-21 Subpar Web Dev

不，你不能。你需要重新加載GIF和CSS不能這樣做。

來源

2016-04-21 18:27:41 cnorthfield

好的。我想也許有可能因爲可以用CSS來改變'href's。 –

CSS用於演示。你不能修改文檔對象模型對不起:(隨意[接受我的回答]（http://stackoverflow.com/help/accepted-answer） – cnorthfield

我能想出用純CSS最接近的事正在改變URL上:hover但它只會重置一次：

div { 
 
    background-image: url(http://i.imgur.com/6wffOji.gif); 
 
    height:50px; 
 
    width: 100px; 
 
} 
 

 
div:hover { 
 
    background-image: url(http://i.imgur.com/6wffOji.gif?v=1); 
 
}

<div></div>

這種方法需要你使用background-image代替<img>標籤。

編輯：另一種方法是將所述的GIF圖像的1列精靈，其中每個幀被放置在一排，下彼此，然後使用CSS @keyframes和animation具有在更好地控制圖像的動畫，可以逆轉，互生，控制持續時間等

簡單GIF（動畫）：

GIF精靈（沒有動畫，靜態圖像）：

代碼：

div { 
 
    height:50px; 
 
    width: 100px; 
 
    background-image: url(http://i.imgur.com/3YMNTbS.gif); 
 
} 
 

 
div:hover { 
 
    animation: gif steps(6) 0.5s forwards; 
 
} 
 

 
@keyframes gif { 
 
    to {background-position: 0 100%;} 
 
}

<div></div>

正如你所看到的，:hover狀態觸發的gif動畫關鍵幀。函數在這裏是關鍵，它將逐步遍歷幀而不是連續的過渡。 n是你精靈中的幀數。我使用了SpritePlane來生成與Photoshop的精靈。創建一個精靈很容易，大小差不多，你可以保存JPEG以獲得更多的壓縮效果，或者爲平滑的Alpha通道保存PNG（也可以壓縮）。

來源

2016-04-22 05:41:04 Aziz

我可以用CSS重啓一個gif（沒有JS）嗎？

回答

相關問題