CSS转换淡入方向 [英] CSS Transition Fade Direction

问题描述

我的想法是让一些文字与背景有相同的颜色使它看不见，我然后要在文本上放置一个图像，并使用翻译从左到右移动图像。然后我将同步过渡，使得当图像通过文本中的字符时，该字符将渐渐消失。有效地使其看起来好像图像是揭露文本。

图像翻译很好，文本实际上淡入淡出。这只是文字一下子淡出。是否可能让文本翻译从左到右？

如果这不可能使用CSS，我需要学习如何使用？

编辑：添加一些代码。

这里是CSS

  #topbar 
 {
 background-color：＃EEEEE0; 
 background：linear-gradient（向右，＃EEEEE0，＃EEDC82）; 
 display：block; 
 width：100％; 
 margin-left：250px; 
 padding：30px; 
 border-radius：25px; 
} 
 
 
 #headertext 
 {
 color：＃EEEEE0; 
 transition：color 2s ease .1s; 
} 
 
 #rocket 
 {
 display：block; 
 position：absolute; 
顶部：55px; 
 transition：all 3s ease .1s; 
} 
 
 #topbar：hover #rocket 
 {
 -webkit-transform：translate（800px，0） 
} 
 
 #topbar：hover #headertext 
 {
 color：black; 
} 
  

提前感谢。

解决方案

我会把我的评论作为答案，因为他的问题解决了。

CSS从左向右渐减

I am messing around with CSS transitions and am having difficulty getting the effect I want.

My idea was to have some text be the same color as the background effectively making it invisible, I was then going to position an image over the text, and use a translation to move the image from left to right. I was then going to sync up the transitions so that as the image passed over a character in the text, that character would be fading in. Effectively making it seem as if the image was "uncovering" the text.

The image translates fine, and the text does in fact fade in. It's just that the text fades in all at once. Is it possible to have the text translation fade from left to right?

If this is not possible using just CSS what would I need to learn how to use?

EDIT: adding some code.

Here is the CSS

#topbar
{
background-color:#EEEEE0;
background: linear-gradient(to right, #EEEEE0,#EEDC82);
display: block;
width: 100%;
margin-left:250px;
padding: 30px;
border-radius:25px;
}


#headertext
{
color: #EEEEE0;
transition: color 2s ease .1s;
}

#rocket
{
display:block;
position:absolute;
top:55px;
transition: all 3s ease .1s;
}

#topbar:hover #rocket
{
-webkit-transform: translate(800px, 0);
}

#topbar:hover #headertext
{
color:black;
}

Thank you in advance.

解决方案

I will put my comment as a answer since his problems is solved.

CSS fade left to right

这篇关于CSS转换淡入方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！