平滑過渡到另一個

.tidings { 
 
    width: 30%; 
 
    float: left; 
 
    margin: 0 3%; 
 
    } 
 

 
    .tidingsimg:before{ 
 
     content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png"); 
 
     position: relative; 
 
     transition: opacity 1s ease; 
 
     -webkit-transition: opacity 1s ease; 
 
    } 
 
    .tidingsimg:after{ 
 
     content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png"); 
 
     position:absolute; 
 
     top: 0;margin-top: 10px; 
 
     opacity:0; 
 

 
     transition: opacity 1s ease; 
 
     -webkit-transition: opacity 1s ease; 
 
    } 
 
    .tidingsimg:hover:after{ 
 
     opacity:1; 
 
    } 
 
    .tidingsimg:hover:before{ 
 
     opacity:0; 
 
    }

<div class="tidings"><a href="http://hvalla.deviantart.com" class="tidingsimg"></a></div>

我有我想有順利過渡到使用content: url另一個圖像的圖像。它突然改變圖像，但我無法弄清楚如何應用轉換實際上使它從一個圖像平滑過渡到另一個。使用內容可以做到這一點嗎？

Here is a JSFiddle showing what I have going on.

來源

2017-07-31 Hollie Ordway

你要懸停？ –

是的，這是正確的 - 圖像應平滑過渡到懸停的其他。對不起，應該指定！ –

這是你想要的嗎？ https://jsfiddle.net/yxusgu7L/ –

你應該使用前後的設置不透明度和轉型對他們

在.tidingsimg：下課後我們添加的位置是：絕對的頂部：0;保證金頂：10px的;因爲沒有它的風格後會遠遠低於之前的風格

.tidings { 
 
    width: 30%; 
 
    float: left; 
 
    margin: 0 3%; 
 
    } 
 

 
    .tidingsimg:before{ 
 
     content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png"); 
 
     position: relative; 
 
     transition: opacity 1s ease; 
 
     -webkit-transition: opacity 1s ease; 
 
    } 
 
    .tidingsimg:after{ 
 
     content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png"); 
 
     position:absolute; 
 
     top: 0;margin-top: 10px; 
 
     opacity:0; 
 

 
     transition: opacity 1s ease; 
 
     -webkit-transition: opacity 1s ease; 
 
    } 
 
    .tidingsimg:hover:after{ 
 
     opacity:1; 
 
    } 
 
    .tidingsimg:hover:before{ 
 
     opacity:0; 
 
    }

<div class="tidings"><a href="http://hvalla.deviantart.com" class="tidingsimg"></a></div>

來源

2017-07-31 04:02:24 Muzeeb

平滑過渡到另一個

回答

相關問題