Question

我想为小文字制作动画，我想逐个显示这些字母？

有没有办法使用CSS3？

Answer 1

检查此解决方案的链接：

http://goo.gl/5Laa43

http://codepen.io/rusjames/pen/uAFhE

Answer 2

只需将您的字母包装在单个标记中，例如span并为其设置动画。 W3C specification只有first-letter伪类。

Answer 3

或检查此关键帧动画

@-webkit-keyframes typing {
    from { width: 0 }
    to { width:16.3em }
}

@-moz-keyframes typing {
    from { width: 0 }
    to { width:16.3em }
}

@-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

@-moz-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

body { font-family: Consolas, monospace; }

h1 { 
    font-size:150%;
    width:16.3em;
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid black;

    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}

Answer 4

http://letteringjs.com/是jQuery的一个插件，它将span标记中的每个字母包装为动画，但保持html在源代码中保持干净。如果您已经在使用jQuery，那么这是一个很好的解决方案，遗憾的是还没有纯CSS解决方案。

Answer 5

我使用的textillate.js取决于animate.css。开始使用这两者非常容易。来自他们的文档：

<h1 class="tlt">My Title</h1>

你的JavaScript应该是这样的：

$(function () {
    $('.tlt').textillate();
})

https://github.com/jschr/textillate https://github.com/daneden/animate.css

Answer 6

如果您只需要逐字母显示某些内容，则不需要jQuery或Textillate或任何其他插件。请复制一下。

<script type="text/javascript">
function printLetterByLetter(destination, message, speed){
    var i = 0;
    var interval = setInterval(function(){
        document.getElementById(destination).innerHTML += message.charAt(i);
        i++;
        if (i > message.length){
            clearInterval(interval);
        }
    }, speed);
}

window.onload = function(){
    printLetterByLetter("someElement", "Hello world, bonjour le monde.", 100);
}
</script>

将'someElement'替换为显示文本的html元素的id。将'100'替换为任何其他数字。这意味着每100毫秒出现一个新字母。

Answer 7

试试这个

http://www.hungry-media.com/code/jQuery/tickerType/

Css3无法独立完成，你需要一些脚本来逐个切割字符

如何使用css3为文本中的字母设置动画？

7 个答案: