php实现打字效果,CSS 实现打字效果

JS实现

最近做项目的时候需要实现一个字符逐个出现的打字效果，在网上一搜有个不错的jQuery插件Typed.js，效果很赞

$(function(){

$(".element").typed({

strings: ["First sentence.", "Second sentence."],

typeSpeed: 0

});

});

具体用法可以看看项目地址，带注释的源码200多行，不算复杂

实现方法也不神奇，大多数人肯容易可以想到，用js逐个向容器内添加字符，作者做了很多字符的出来还有速度神马的，我们可以撸一个简单的var s = 'Hello World! Hello World! Hello World!';

var con = $('.container');

var index = 0;

var length = s.length;

var tId = null;

function start(){

con.text('');

tId=setInterval(function(){

con.append(s.charAt(index));

if(index++ === length){

clearInterval(tId);

index = 0;

start()

}

},100);

}

start();

JS Bin

CSS实现

如果对细节和浏览器兼容性要求的不是很严格，我们可以通过CSS3实现

animation-timing-function

CSS3的动画都接触过，我们平时这么用animation: animation-name animation-duration animation-iteration-count

animation: name 5s infinite;

其实完整版的animation参数很多，也可以写成分别的属性animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

今天我们就要关注一下animation-timing-function，大多数动画在时间轴上时线性变化的，jQuery动画的时候我们用的liner参数就是这意思，但CSS3提供了一些其它的变化方式由animation-timing-function属性指定ease

linear

ease-in

ease-out

ease-in-out

step-start

step-end

steps

cubic-bezier

每种动画效果都可以对应一种贝塞尔曲线 cubic-bezier可以帮我直观的看一下贝塞尔曲线效果，这里不多说了

steps

我们看一下steps的效果，其实顾名思义就可以想到steps什么意思，就像俄罗斯方块的小格子往下掉也是动画，但是不是连续的，更像是逐帧的，steps就是实现这种效果的

steps的语法steps(number_of_steps, [start|end])number_of_steps 动画分为多少步执行

direction 动画显示状态，end：默认值，第一帧开始前显示，start：第一帧结束后显示

看个科学的图片帮助理解

走两步

有了这些我们就能做个好玩儿的效果了

JS Bin

.walk {

width: 125px;

height: 150px;

background: url(http://www.php.cn/) left;

-webkit-animation:anima 1s steps(16) infinite ;

}

@-webkit-keyframes anima{

from { background-position:2000px 0;}

to {background-position:0px 0;}

}

打字效果

打字效果也就可想而知了，改变容器宽度即可(只能单行使用，还得做到每步增加长度和字母宽度一致，还是js好其实).typing{

width:250px;

white-space:nowrap;

overflow:hidden;

-webkit-animation: type 3s steps(50, end) infinite;

animation: type 3s steps(50, end) infinite;

}

@-webkit-keyframes type{

from { width: 0;}

}

@keyframes type{

from { width: 0;}

}

JS Bin

更多CSS 实现打字效果相关文章请关注PHP中文网！

相关标签：CSS

本文原创发布php中文网，转载请注明出处，感谢您的尊重！