交叉淡入div背景：懸停 - 可能在CSS？

在div背景更改期間是否有平滑過渡的方法？理想情況下，我想在CSS中做到這一點，而不是使用任何JS。交叉淡入div背景：懸停 - 可能在CSS？

在我的CSS，我有：

.examplediv { 
    background: url(img_img.png); 
} 

.examplediv:hover{ 
    background: url(brighter_img.png); 
}

它在做什麼，我想它做的（改變圖片）什麼，但如果有一種方法，使這兩個背景「溶解」到彼此，我會開始用感激的嘴巴開始發泡。

注意：我要做的效果本質上是一個不透明的改變，所以如果用不透明度編碼溶解更容易，我全是耳朵！

坦克！〜

來源

2016-04-21 Babs Derek

這絕對有可能只使用CSS。看到這個搗鼓一個例子：https://jsfiddle.net/ffqdmcws/

HTML：

<div class="crossfade"> 
    <div class="static"></div> 
    <div class="hover"></div> 
</div>

CSS：

.crossfade { 
    position: relative; 
    width: 300px; 
    height: 200px; 
} 

.static, .hover { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    transition: opacity 1s ease; 
} 

.static { 
    background: url('http://lorempixel.com/300/200/food'); 
    opacity: 1; 
} 

.hover { 
    background: url('http://lorempixel.com/300/200/cats'); 
    opacity: 0; 
} 

.crossfade:hover > .static { 
    opacity: 0; 
} 

.crossfade:hover > .hover { 
    opacity: 1; 
}

在這種情況下，我已經得到了使用crossfade類div容器，和一對夫婦的其他裏面的div，使用類static和hover。

static類包含最初顯示的背景，hover類包含在懸停時淡出的背景。 static類的初始不透明度爲1，hover類的初始不透明度爲0，所以您只能看到類static的div。

然後，如果你連上使用.crossfade:hover容器div的，懸停動作，以便設置opacity: 0;爲static和opacity: 1;爲hover，隱藏static，並顯示hover，當你將鼠標懸停在div容器。

最後，爲了使背景重疊，使用absolute定位兩個內部div，所以它們在任何時候都處於彼此之上。此外，對於真正的淡入淡出效果，您需要transition: opacity 1s ease;規則，該規則說明您希望不透明度在1秒內過渡，而不是立即切換。從1-> 0和0-> 1不透明度的div都會給你背景圖像的淡入淡出效果。

來源

2016-04-21 17:45:31

你可以用絕對定位的僞元素來做到這一點。默認情況下會顯示一個，懸停時顯示另一個。

.examplediv { 
 
    height: 600px; 
 
    position: relative; 
 
} 
 

 
.examplediv:before, .examplediv:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    z-index: -1; 
 
    transition: opacity 0.5s ease-out; 
 
} 
 

 
.examplediv:before { 
 
    background: url(https://pixabay.com/static/uploads/photo/2015/07/19/17/38/flower-851725_960_720.jpg) 
 
} 
 

 
.examplediv:after { 
 
    background: url(https://pixabay.com/static/uploads/photo/2015/12/07/23/56/pink-flower-1081646_960_720.jpg); 
 
    opacity: 0; 
 
} 
 

 
.examplediv:hover:before { 
 
    opacity: 0; 
 
} 
 

 
.examplediv:hover:after { 
 
    opacity: 1; 
 
}

<div class="examplediv"> 
 

 
</div>

JSFIDDLE

來源

2016-04-21 18:07:11 Julia

交叉淡入div背景：懸停 - 可能在CSS？

回答

相關問題