我需要创建一个在鼠标悬停时触发的动画。这个动画是一个缩略语，它会展开成它的完整形式。例如，当我悬停在“CSS3”上时，它应该扩展到“层叠样式表”，其中字母“C”和“S”之间出现“ascading”，字母逐个出现。这只能通过CSS3实现吗？（编辑说明，我假设他的意思是像打字一样新的字母被输入，而不是一下子全部出现）
CSS3过渡动画
3
- tim
2
我已经编辑过了（但还在等待批准），我的意思是您想让新的字母一个接一个地看起来像是正在逐个输入，而不是一次性全部出现。 - thecoshman
1还有，你真的在用Flash吗？还是像我怀疑的那样只是HTML和CSS？ - thecoshman
5个回答
1
你可以使用CSS 3来实现这个功能。
这是我制作的一个提示：
Js Fiddle（将鼠标悬停在CSS单词上以查看效果）
这可以通过一些类和仅使用span标签来实现。 为了简单起见，我只使用了P标签和内部的Span标签。
希望这能帮到你！
编辑
尝试设置动画速度以获得不同的效果。 您还应该能够为效果（颜色、文本缩进）设置不同的时间，以便在文本缩进完成后字体变得可见。
- Shion
0
如果你正在尝试做我认为你在尝试做的事情，那么这不能通过CSS完成，除非使用很多荒谬的规则。
如果你正在使用Flash，则只需使用一个电影剪辑和一些Action Script来触发动画。
然而，我相信你实际上正在使用HTML/CSS/JS（网页浏览器相关）, 在这种情况下，你需要使用一些JavaScript。我建议你看看Jquery，这是一个很好的库，可以非常容易地检测悬停效果，然后操作它所说的内容。
你可能需要类似于以下的东西...
<span class="ExpandingAbreviation">
<span class="short">CSS3</span>
<span class="Long">cascading style shet</span>
</span>
在你的样式表中，将"long"隐藏，并通过Jquery设置一个监听器以侦听“short”的悬停事件，并编写代码以隐藏它并显示长文本。虽然，我不太确定你想要什么效果。
- thecoshman
0
在 JavaScript 中，可以通过更改 onMouseover() 的 InnerHTML 值来实现相同的效果。
<body>
<script type=text/javascript>
function changetext()
{
document.getElementById("change").innerHTML='<p>Cascading Style Sheets<p>'
}
</script>
<div id="change" onmouseover="changetext();">css</div>
</body>
但我认为在CSS3中不可能改变文本。 我们可以添加过渡效果使其看起来更好。
- gout
-1
我已经建立了一个 jsfiddle，它可以实现你想要的功能。我认为这是最容易理解正在发生什么的方法。你所需要的功能只需要 jQuery。只需点击“CSS”即可尝试。
- devsnd
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接