0

我在搞乱 CSS 过渡，很难得到我想要的效果。

我的想法是让一些文本与背景颜色相同，从而有效地使其不可见，然后我将在文本上放置一个图像，并使用翻译将图像从左向右移动。然后我将同步过渡，以便当图像通过文本中的一个字符时，该字符会淡入。有效地使图像看起来好像在“揭开”文本。

图像翻译得很好，文本实际上淡入了。只是文本一下子淡入了。是否可以让文本翻译从左到右淡化？

如果仅使用 CSS 无法做到这一点，我需要学习如何使用？

编辑：添加一些代码。

这是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;
}

先感谢您。

4

2 回答 2

0

CSS 没有提供任何基于每个字符定义规则的方法，如果我正确理解您，您将需要这种方法。我能想到的最好方法是编写一个 javascript，它通过给定的文本字符串并将每个字符包装在一个跨度中，然后为每个字符分配过渡样式，并增加延迟时间，以便它们很好地动画化。幸运的是，我以前做过！

http://dl.dropboxusercontent.com/u/23451438/textfade/index.html

它绝不是完美的，除了 webkit，我不会为任何东西设置前缀值，但希望它能让你开始。

于 2013-05-22T19:40:56.197 回答
0

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

CSS 从左到右淡入淡出

于 2013-05-22T23:32:58.800 回答