平滑过渡到另一个

.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

平滑过渡到另一个

回答

相关问题