Question

我需要创建一个动画，当光标悬停在它上面时，它会被移动。动画是一个缩写，可以扩展到完整形式，例如当我将鼠标悬停在“CSS3”上时。它应该扩展为“级联样式表”，字母“C”和“S”之间出现ascading，字母一个接一个地出现，只能通过CSS3吗？ （编者注：我认为他的意思是，就像输入的新字母一样，而不是一次只显示）

Answer 1

你最有可能用CSS 3做到这一点。

这是我提出的提示：

Js Fiddle（将鼠标悬停在CSS上以查看效果）

这可以通过一些类和跨度来实现。为简单起见，我只使用了P-Tag和Span的内部。

希望这有帮助！

修改

尝试设置动画的速度以获得不同的效果。您还应该能够为效果设置不同的时间（颜色，文本缩进），以便在文本缩进完成后字体可见

Answer 2

如果你正在尝试做我认为你想做的事情，那么这不能通过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'上设置一个用于悬停事件的监听器，并编写代码来隐藏它并显示long。但是，我不太确定你的确有什么影响

Answer 3

可以通过在Js中更改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中更改文本。我们可以添加过渡效果，看起来不错。

Answer 4

http://www.designscripting.com/webtools/css3/generator/

CSS3过渡生成器。

Answer 5

我已经建立了一个jsfiddle，它可以做你喜欢的事情。我认为这是了解最新情况的最简单方法。这个功能所需要的就是jQuery。只需点击“CSS”即可试用。

http://jsfiddle.net/njZXj/5/

动画通过css3过渡

5 个答案: