CSS的过渡缓出似乎不起作用

我在图像上有一个简单的文本叠加，使背景变暗。我用transition与ease-in-out，但它似乎没有妥善解决。CSS的过渡缓出似乎不起作用

我知道ease-in-out应该应用于事物本身，而不是它的伪:hover，但它似乎并不想工作。我尝试了很多方法，移动它，删除东西，添加东西，但似乎没有任何意义。我注意到文字做得很好，但background与rgba不透明不合作。它只是扣回:(

可做参考的真人版在http://g4stly.com/staff.html知道我在说什么，特别是

在此先感谢

我的代码如下：！

#g4stly 
 
\t \t \t { 
 
\t \t \t background-image: url('http://g4stly.com/images/users/g4stly.jpg'); 
 
\t \t \t } 
 

 
.textFrame 
 
\t \t \t { 
 
\t \t \t text-align: center; 
 
\t \t \t font-size: 20px; 
 
\t \t \t color: #DDAA49; 
 
\t \t \t text-decoration: none; 
 
\t \t \t background-repeat: no-repeat; 
 
\t \t \t background-size: cover; 
 
\t \t \t border-radius: 30%; 
 
\t \t \t width: 250px; 
 
\t \t \t height: 250px; 
 
\t \t \t } 
 
\t \t \t 
 
.textFrame p 
 
\t \t \t { 
 
\t \t \t opacity: 0; 
 
\t \t \t height: 75%; 
 
\t \t \t margin: 0; 
 
\t \t \t border-radius: 30%; 
 
    \t \t transition: opacity 300ms ease-in-out; 
 
\t \t \t } 
 
\t \t \t 
 
.textFrame p a 
 
\t \t \t { 
 
\t \t \t text-decoration: none; 
 
\t \t \t color: #976649; 
 
\t \t \t font-size: 25px; 
 
\t \t \t } 
 
\t \t \t 
 
.textFrame:hover p 
 
\t \t \t { 
 
\t \t \t opacity: 1; 
 
\t \t \t background: rgba(0,0,0,0.8); 
 
\t \t \t } 
 
\t \t \t 
 
.textFrame p:first-child 
 
\t \t \t { 
 
\t \t \t padding: 25% 0 0 0; 
 
\t \t \t }

<div id="g4stly" class="textFrame textFrameLeft"> 
 
\t \t <p><a href="http://steamcommunity.com/profiles/76561198068338533/" target="_blank">g4stly</a><br><br> 
 
\t \t Owner of everything g4stly related<br> 
 
\t \t Basically, the boss.</p> 
 
\t </div>

来源

2017-08-15 Mark

我注意到你更新的代码。看起来你的问题已经b een解决了。

.textFrame p只适用于opacity的转换，因此您看不到背景转换。我种子您添加background ....的过渡，你也可以这样做：

transition: all 1000ms ease-in-out;

另一种选择是将rgba背景移到.textFrame p里面，这样的背景也不会突然消失，随着淡出元素的其余部分。

希望这有助于你理解的原因:)

来源

2017-08-15 18:14:15

正要说这个:) – crazymatt

是啊，我发现自己违背我自己的想法很多在这个网站，这是令人沮丧的严重一倍。我想知道出了什么问题，我尝试了很多东西，阅读了很多东西，没有任何工作，只是意识到这是一个简单的问题。只有当我发布这个问题，我实际上重读了这一行，并且阅读“不透明”一词时，我才意识到我有多愚蠢，我并没有意识到它只影响了不透明性。我在另一个转换中添加了第二行，这使它完全不起作用。 – Mark

然后，一个快速的谷歌搜索告诉我使用逗号，并添加下一个转换，作为第二个转换语句破坏他们两个。我觉得哑巴D： – Mark

你有一个逗号那里应该是一个分号。

transition: background 1000ms ease-in-out;

#g4stly { 
 
    background-image: url('http://g4stly.com/images/users/g4stly.jpg'); 
 
} 
 

 
.textFrame { 
 
    text-align: center; 
 
    font-size: 20px; 
 
    color: #DDAA49; 
 
    text-decoration: none; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    border-radius: 30%; 
 
    width: 250px; 
 
    height: 250px; 
 
} 
 

 
.textFrame p { 
 
    opacity: 0; 
 
    height: 75%; 
 
    margin: 0; 
 
    border-radius: 30%; 
 
    transition: background 1000ms ease-in-out; 
 
    transition: opacity 1000ms ease-in-out; 
 
} 
 

 
.textFrame p a { 
 
    text-decoration: none; 
 
    color: #976649; 
 
    font-size: 25px; 
 
} 
 

 
.textFrame:hover p { 
 
    opacity: 1; 
 
    background: rgba(0, 0, 0, 0.8); 
 
} 
 

 
.textFrame p:first-child { 
 
    padding: 25% 0 0 0; 
 
}

<div id="g4stly" class="textFrame textFrameLeft"> 
 
    <p><a href="http://steamcommunity.com/profiles/76561198068338533/" target="_blank">g4stly</a><br><br> Owner of everything g4stly related<br> Basically, the boss.</p> 
 
</div>

来源

2017-08-15 18:24:03

CSS的过渡缓出似乎不起作用

回答

相关问题