CSS：

我使用:after創建了設計懸停（長的故事，在與VC WP）和我沒有試圖讓:after CSS淡入當有人懸停在過渡（懸停）後最初的div。CSS：

這裏是一個小提琴 - click here

下面是我的做法：

.border-home:hover:after { 
    position: absolute; 
    top: 0%; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: url(http://i.imgur.com/3Si5tIy.png) 50% 50% no-repeat; 
    background-size: 190px 50px; 
    content: ''; 
    cursor: pointer; 
    background-color: rgba(127, 165, 61, 0.9); 
}

我努力使綠色背景和更多按鈕淡入順利。

我該如何做到這一點？

來源

2016-11-20 Max

如何使用關鍵幀動畫？ –

@Jojo如何在沒有關鍵幀的情況下進行轉換？ ;） – connexo

@connexo哦，我沒有想過不透明。我試圖直接使用過渡來操作Background-color，但這並沒有奏效。所以我認爲動畫是最好的。 –

只需添加

.border-home::after { 
    transition: opacity 0.4s ease; 
    opacity: 0; 
} 

.border-home:hover::after { 
    opacity: 1; 
}

來源

2016-11-20 11:25:43 connexo

非常感謝！我一直在爲此苦苦掙扎。 – Max

CSS中的轉換非常簡單和舒適。 – connexo

葉氏，connexo是正確的，這是你的代碼jsfiddle一個簡單的例子。

首先，你需要設置你的造型在:after（背景，位置等）和不透明度一些過渡性質，然後就顯示出它在:hover:after）

來源

2016-11-20 11:39:16 codegaze

謝謝你提供的小提琴讓我的頭附近！ – Max

回答

相關問題