python打字机效果_打字效果动画的4种实现方法(超简单)

方法一(纯css实现)：

html代码：

打字动画打字动画打字动画

css样式：

.typing{

font-size: 1rem;

padding-top: 6%;

margin-bottom: 5%;

font-weight: normal;

letter-spacing: .3rem;

-webkit-animation: type 2s steps(50, end) forwards;

animation: type 2s steps(50, end) forwards;

}

.typing-item{

text-align: center;

color: black;

width:100%;

white-space:nowrap;

overflow:hidden;

}

@-webkit-keyframes type{

from { width: 0;}

}

@keyframes type{

from { width: 0;}

}

缺点：只能实现一行式的打字效果，无法打出一段落文字

方法二(jquery):

html代码：

|

jquery代码：

$(function() {

myPrint(["hello my word!"], 100);

function myPrint(arr, speed) {

var index = 0;

var str = arr[index];

var i = 0;

var add = true;

var mySetInterval = setInterval(function() {

// 延时4个字符的时间

if (i == str.length + 4) {

add = false;

// 如果是最后一个字符串则终止循环函数

if (index + 1 >= arr.length) {

clearInterval(mySetInterval);

}

} else if (i == -2) {

// 删除后延时2个字符的时间

add = true;

str = arr[++index];

}

setTimeout(function() {

if (add) {

i++;

$(".text").html(str.substring(0, i));

} else {

$(".text").html(str.substring(0, i - 1));

i--;

}

})

}, speed)

}

})

方法三(jquery-typed插件):

html代码：

引入Typed.js，Typed.js内容如下

// The MIT License (MIT)

// Typed.js | Copyright (c) 2014 Matt Boldt | www.mattboldt.com

// Permission is hereby granted, free of charge, to any person obtaining a copy

// of this software and associated documentation files (the "Software"), to deal

// in the Software without restriction, including without limitation the rights

// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

// copies of the Software, and to permit persons to whom the Software is

// furnished to do so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in

// all copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

// THE SOFTWARE.

! function($) {

"use strict";

var Typed = function(el, options) {

// chosen element to manipulate text

this.el &