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>
答
我注意到你更新的代码。看起来你的问题已经b een解决了。
.textFrame p
只适用于opacity
的转换,因此您看不到背景转换。我种子您添加background ....
的过渡,你也可以这样做:
transition: all 1000ms ease-in-out;
另一种选择是将rgba
背景移到.textFrame p
里面,这样的背景也不会突然消失,随着淡出元素的其余部分。
希望这有助于你理解的原因:)
答
你有一个逗号那里应该是一个分号。
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>
正要说这个:) – crazymatt
是啊,我发现自己违背我自己的想法很多在这个网站,这是令人沮丧的严重一倍。我想知道出了什么问题,我尝试了很多东西,阅读了很多东西,没有任何工作,只是意识到这是一个简单的问题。只有当我发布这个问题,我实际上重读了这一行,并且阅读“不透明”一词时,我才意识到我有多愚蠢,我并没有意识到它只影响了不透明性。我在另一个转换中添加了第二行,这使它完全不起作用。 – Mark
然后,一个快速的谷歌搜索告诉我使用逗号,并添加下一个转换,作为第二个转换语句破坏他们两个。我觉得哑巴D: – Mark